用于过滤的 DataTables 第二个标题行

Posted 2023-05-09

【中文标题】用于过滤的 DataTables 第二个标题行

【英文标题】：DataTables Second Header Row for Filtering

【发布时间】：2019-01-28 04:01:11

【问题描述】：

我正在使用Individual Column Searching 中的代码在每列的页脚中添加选择字段，以允许过滤相应的列。

我希望将其移至顶部，以低于标题字段和列。我添加了第二个标题行并将.appendTo( $(column.footer()).empty() ) 替换为.appendTo( $(column.header()).empty() )

问题是当我调用$(column.header()).empty() 时，header() 是底部的标题行。有没有办法让主标题行成为顶部标题行，并让多过滤器选择成为其正下方的行？

这就是它的样子。我什至无法单击选择下拉菜单，因为它只是对列字段进行排序。

【参考方案1】：

这个技巧可能对你有用。

将以下 CSS 添加到您的代码中：

 tfoot 
    display: table-header-group;

并稍微更改您的代码：

在<thead> 和<tbody> 旁边添加<tfoot>，就像我在myfiddle 之一中所做的那样，您的问题就解决了。

【讨论】：

这实际上是一个非常聪明的解决方案！