如何停止数据表中的 YADCF 过滤器以扰乱 headers 单元格宽度

Question

当我向数据表添加一些 YADCF 过滤器时，列的大小调整变得混乱（如图片所示）。是否可以防止这种情况？

无过滤器

有过滤器

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

根据 Daniel 的建议，结果如下：

nowrap

如您所见，还不是很好... 为什么 yadcf 过滤器会增加 TH 的大小？

Answer 1

你必须明白，当你添加一个 wide(r) 元素时，你的一些 table headers（过去更薄）你的 table 宽度会变大（很好）

我可以建议以下解决方案：

1) 减小 yadcf 过滤器的宽度（将宽度属性应用于 .yadcf-filter class）

2) 使用 scrollX

3) 使用 filter_container_id 属性

将过滤器放在 table 之外

p.s 为了克服您的 headers 文本被破坏的问题，您可以使用以下 css

table th {
    white-space: nowrap;
    min-width: 150px;
}

Answer 2

调整列大小的不是 yacdf，调整大小是一件复杂的事情。 yacdf 只是放置一个文本输入元素，它继承一定的宽度（不一定由 yacdf），然后 dataTables 对该输入元素的存在做出反应。顺便说一句，这也是愚蠢 HTML table 的自然行为，尽管 dataTables 在后台进行了大量计算，具体取决于您是否启用了 X 滚动，或者是否启用了自动宽度计算。 yadcf 不能为您做的是查看 header 的 final 宽度并巧妙地调整输入文本元素的宽度。列的最终宽度不是一件容易获得的事情，主要由数据表计算（除非您关闭 autoWidth - 稍后查看 - 但即使在 autoWidth 关闭的情况下也会有一些小的摆动）。

当您的 table 调整大小时，会出现更多情况。在你的情况下，最重要的是

过滤器引入的文本输入元素的宽度。您可以通过自定义与适当的 class 相关的 CSS 来单独覆盖每列搜索框的宽度。在您的情况下，更改前四列过滤器的大小：

假设您的 table 具有 ID 'reportTable'，HTML 标记：

<table id="reportTable" class="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 bootstrap。另请注意，yadcf 环绕着它放置的许多元素，并使用具有特定 classes 和 id 的 div 进行控制。这些包装的目的正是让您有机会通过 CSS.

微调外观和行为

其他建议：

因为我看到你的栏目很多，而且不是很宽。我看到您已经禁用了某些列的清除按钮。如果那个按钮无论如何都不适合，那很好。这可以通过在 yacdf init 期间为相应列的配置提供 filter_reset_button_text: false 来完成。我想你明白了。
如果你真的从 header 中移出 space，正如 Daniel 提到的，你可以将过滤器控件移出 header。
也阅读 dataTables 配置选项，例如 autoWidth，查看相关选项，API 和事件：http://datatables.net/reference/option/autoWidth

在更多应用程序中，我最终通过 CSS 完全显式控制了列宽，否则它们只是被 dataTables 宽度计算和原生 HTML table行为。如果你想要响应式设计，那是不可取的。看起来你的 header 很复杂，所以你对数据表有一定的了解。

最后，我们可以在您的最终屏幕截图中看到，输入文本元素的存在迫使这些列变宽，从而迫使其他列缩小。缩小到 dataTable 的排序背景图标与 header 列重叠。如果你的 header 太多而水平 space 不够，你可能别无选择，只能为数据表打开水平滚动（Daniel 还提到了 Scroll X）。这会给 dataTables 带来松弛，并且会延长 table: http://datatables.net/reference/option/scrollX

如何停止数据表中的 YADCF 过滤器以扰乱 headers 单元格宽度

How to stop YADCF Filters in Datatables to mess with the headers cell width

jquery-datatables

yadcf