如何將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爲陣（不THS）和改變

$("tfoot input") 

到

$("thead input") 

Answer 2

您可以通過添加參數，將其移動到您的桌面頂部的 'sPlaceHolder'

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

Answer 3

試試這個

$(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 4

使用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 5

只需使用下面的JavaScript代碼（這裏 '示例' 是你的表的id）：

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

Answer 6

在CSS你可以使用

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

和

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

，你會被他們定位是這樣的：

tfoot 
thead 
tbody 

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('<input type="text" placeholder="Search '+title+'" />'); 
}); 

// 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(); 
     } 
    }); 
}); 

}）;