如何将DataTables列过滤器置于顶部

Question

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

    $(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": '<"top"if>rt<"bottom"lp><"clear">'

    }).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

试试这个

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

Answer 6

使用sPlaceHolder选项:

sPlaceHolder: "head:before"

例如:

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

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