如何将DataTables列filter置于顶部

我正在使用jQuery DataTables最新版本。 我想在每个表上使用单独的列filter，所以我使用列filter插件，但我只在页脚中获取搜索框。 我想放在标题中

$(document).ready(function () { var oTable=$("#example").dataTable({ "bJQueryUI": true, "sScrollX": "100%", "aLengthMenu": [[5, 15, 50, 100], [5, 15, 50, "l00"]], "iDisplayLength": 10, "sPaginationType": "full_numbers", "sDom": 'rt' }).columnFilter({"sPlaceHolder":"head :before", "aoColumns": [{ "type": "text" }, { "type": "text" }, null, null, null, null, { "type": "text" }, null, { "type": "text" }, { "type": "text" }, { "type": "text" }, 

我怎么把它放在桌子的顶部？

Answer 1

方法1（CSS）

您可以将CSS更改为

 tfoot { display: table-header-group; } 

方法2（Javascript）

将滤波器行的东西放入THEAD作为TD（而不是TH）并更改

 $("tfoot input") 

至

 $("thead input") 

Answer 2

您可以通过添加参数’sPlaceHolder’将其移动到表格的顶部

 }).columnFilter({ sPlaceHolder: "head:after", aoColumns: [ ... 

Answer 3

只需使用以下javascript代码（此处’example’是您表的id）：

 $('#example tfoot tr').insertAfter($('#example thead tr')) 

Answer 4

在CSS中你可以使用

display: table-header-group; //on tfoot

和

display: table-row-group; //on thead

你会得到这样的定位：

 tfoot thead tbody 

Answer 5

使用sPlaceHolder选项：

 sPlaceHolder: "head:before" 

例子：

 dataTable.columnFilter({ sPlaceHolder: "head:before", aoColumns: [ { type: "select" }, { type: "select" }, { type: "select" }, { type: "select" }, { type: "select" } ] }); 

看演示 – > http://jsfiddle.net/JNxj5/

Answer 6

试试这个

 $(document).ready(function() { $('#mytable thead td').each( function () { var title = $('#mytable thead th').eq( $(this).index() ).text(); $(this).html( '' ); }); $("#mytable thead input").on( 'keyup change', function () { table .column( $(this).parent().index()+':visible' ) .search( this.value ) .draw(); }); }); 

Answer 7

  CSS: tfoot input { width: 100%; padding: 3px; box-sizing: border-box; } tfoot { display: table-header-group;} Script: $(document).ready(function() { // Setup - add a text input to each footer cell $('#example tfoot th').each( function () { var title = $(this).text(); $(this).html( '' ); } ); // DataTable var table = $('#example').DataTable(); // Apply the search table.columns().every( function () { var that = this; $( 'input', this.footer() ).on( 'keyup change', function () { if ( that.search() !== this.value ) { that .search( this.value ) .draw(); } } ); } ); 

}）;