如何在数据库中停止YADCF过滤器以弄乱标题单元格宽度 [英] How to stop YADCF Filters in Datatables to mess with the headers cell width

问题描述

当我将一些YADCF筛选器添加到datatable中时，列的调整大小就会被弄乱（如图所示）。是否可以防止这种情况？

否过滤器

带过滤器

---------------编辑-----------------

由丹尼尔建议，结果如下：

nowrap

正如你所看到的，它还不错...
为什么yadcf过滤器增加了TH的大小？

解决方案

这是不是调整列大小的yacdf，大小是一件复杂的事情。 yacdf只放置一个文本输入元素，它继承某个宽度（不一定是yacdf），然后dataTables对该输入元素的存在作出反应。这将是一个愚蠢的HTML表的自然行为也是BTW，尽管dataTables在后台有很多计算，具体取决于是否启用了X滚动，或者如果启用了自动宽度计算。 yadcf无法为您做的事情是查看标题的最终宽度，并智能调整输入文本元素的宽度。列的最终宽度并不是一件简单的事情，主要是通过dataTable计算（除非你关闭autoWidth - 稍后再看 - 但即使在autoWidth关闭的情况下也有一些小小的摆动）。

当您的表格调整大小时，有更多的情况出现。在您的情况下，最重要的是

1. 文本输入元素的宽度，过滤器带来的内容可以覆盖搜索框的宽度通过自定义与正确类相关的CSS，为每列分别设置。在您的情况下，要更改前四列的过滤器的大小：

假设您的表具有idreportTable，HTML标记：

 < table id =reportTableclass =table table-condensed table-striped table-bordered> 
< thead>< / thead> 
< tbody>< / tbody> 
< / table> 
  

CSS可以是这样的：

 ＃yadcf-filter  -  reportTable-0 {
 width：40px！important; 
 max-width：40px！important; 
} 
 
＃yadcf-filter  -  reportTable-1 {
 width：40px！important; 
 max-width：40px！important; 
} 
 
＃yadcf-filter  -  reportTable-2 {
 width：60px！important; 
 max-width：60px！important; 
} 
 
＃yadcf-filter  -  reportTable-3 {
 width：60px！important; 
 max-width：60px！important; 
} 
  

请注意，您覆盖的文本输入元素的宽度可能会受到影响您使用的其他框架。我使用Twitter引导为例。还要注意，yadcf包含了很多元素，它使用具有特定类和ids的div进行控制。这些包装的目的正是给你机会通过CSS调整外观和行为。

其他建议：

2. 因为我看到你有很多列，它们不是太宽。我看到您已经禁用某些列的清除按钮。如果那个按钮不合适就好了。这可以通过在 yacdf init 中为相应列的配置提供 filter_reset_button_text：false 来完成。我想你得到了。




3. 如果你真的在标题中的空间不足，就像Daniel所说，你可以将过滤器控件移出标题。 p>




4. 还可以阅读有关dataTables的配置选项，例如autoWidth，查看相关选项，API和事件： http://datatables.net/reference/option/autoWidth

在更多的应用程序中，我最终完全明确地控制了CSS的列宽，否则它们只是被dataTables宽度计算和本机HTML表行为所引起。这是不可取的，虽然如果你想要响应式设计。看起来你有复杂的标题，所以你在某种程度上知道数据表。

最后，我们在最后的屏幕截图中可以看到，输入文本元素的存在迫使那些要扩大的列，这迫使其他列缩小。这个缩小到目前为止，dataTable的排序bacground图标与列标题重叠。如果您的标题太多，水平空间不足，您可能没有其他选择，只能打开dataTable的水平滚动（Daniel还提到Scroll X）。这将为dataTables松懈，它将展开表格： http://datatables.net/reference/ option / scrollX

When I add some YADCF filter to the datatable the resizing of the columns get messed up (as seen in te pictures). Is it possible to prevent this?

No Filters

With Filters

--------------- EDIT -----------------

As sugested by Daniel, here's the result:

nowrap

As you can see, it's not good yet... Why does the yadcf filters increase the size of the TH ?

解决方案

It's not yacdf which resizes the column, sizing is a complex thing. yacdf just places a text input element, which inherits certain width (not necessarily by yacdf), and then dataTables react to the presence of that input element. That would be a natural behavior of a dumb HTML table too BTW, although dataTables has a whole lot of calculation in the background depending on if you enabled X scroll, or if you enabled auto width calculation. What yadcf cannot do for you is to look at the final width of your header and smartly adjust the width of the input text element. The final width of the column is not a simple thing to obtain, and primarily will be calculated by dataTables (unless you turn autoWidth off - see later - but even in autoWidth off case there's some little wiggle going on).

There are more circumstances which come into picture when your table resizes. In your case the most important is

1. the width of the text input element what the filter brings in. You can override the width of search boxes individually for each column by customizing the CSS related to the proper class. In your case to change the size of the first four columns' filters:

Assuming that your table has the id 'reportTable', HTML markup:

<table id="reportTable" class="table table-condensed table-striped table-bordered">
    <thead></thead>
    <tbody></tbody>
</table>

The CSS can be something like:

#yadcf-filter--reportTable-0 {
    width: 40px !important;
    max-width: 40px !important;
}

#yadcf-filter--reportTable-1 {
    width: 40px !important;
    max-width: 40px !important;
}

#yadcf-filter--reportTable-2 {
    width: 60px !important;
    max-width: 60px !important;
}

#yadcf-filter--reportTable-3 {
    width: 60px !important;
    max-width: 60px !important;
}

Note, that the width of the text input element what you override can be affected by other frameworks you use. I use Twitter bootstrap for example. Also note that yadcf wraps around a lot of element it places and controls with divs with specific classes and ids. The purpose of those wrappings are exactly to give you opportunity to fine tune the appearance and behavior by CSS.

Other suggestions:

2. since I saw that you have many columns and they are not too wide. I see that you already disable the clear button for some columns. That's good if that button wouldn't fit anyway. This can be done by supplying filter_reset_button_text: false for the corresponding columns' configuration during yacdf init. I think you got that.

3. If you really out of space in the header, as Daniel mentions you can move the filter control out of the header.

4. Read about dataTables configuration options too, for example the autoWidth, look at related options, API and events too: http://datatables.net/reference/option/autoWidth

In more applications I have I ended up having full explicit control of the column width by CSS, otherwise they were just jerked around by dataTables width calculations and native HTML table behavior. That is not advisable though if you want responsive design. Looks like you have complex headers, so you know dataTables to some extent.

Finally, what we can see in your final screenshot is that the presence of the input text elements forces those columns to widen, which forces the other columns to shrink. That shrink goes so far that dataTable's sorting bacground icons overlap with the column headers. If you have too many headers and not enough horizontal space, you may not have other choice but to turn on the horizontal scroll for dataTables (Daniel also mentions Scroll X). This would give slack for dataTables and it'd stretch out the table: http://datatables.net/reference/option/scrollX

这篇关于如何在数据库中停止YADCF过滤器以弄乱标题单元格宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！