从我所看到的没有自动化的方式来打开列过滤器。即使在他们的示例代码中,他也会手动将输入框放入页脚单元格中。
在我的示例中,我将输入框放在页脚html中,而不是通过代码尝试。请特别注意ajax部分中的data:部分,以了解我如何将数据从表格中提取出来,并将其放入由datatables提供的搜索对象中。
你可以看到它在http://live.datatables.net/tayelawu/2/edit
$(document).ready(function() {
$("#example").on("preInit.dt", function(){
$("#example_wrapper input[type='search']").after("<button type='button' id='btnexample_search'></button>");
});
$('#example').DataTable({
"processing": false,
"serverSide": true,
"initComplete":function(){onint();},
"ajax":{
url: "/examples/server_side/scripts/objects.php",
type:"GET",
data:function(dtp){
// Get the column search values and stuff them in the datatable provided parameters.
var $search = $("#example tfoot input");
$search.each(function(i, item){
dtp.columns[i].search.value = $(item).val();
});
// change the return value to what your server is expecting
// here is the path to the search value in the textbox
var searchValue = dtp.search.value;
return dtp;}
},
"columns": [
{ "data": "first_name" },
{ "data": "last_name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "start_date" },
{ "data": "salary" }
]
});
});
// this function is used to intialize the event handlers
function onint(){
// take off all events from the searchfield
$("#example_wrapper input[type='search']").off();
// Use return key to trigger search
$("#example_wrapper input[type='search']").on("keydown", function(evt){
if(evt.keyCode == 13){
$("#example").DataTable().search($("input[type='search']").val()).draw();
}
});
$("#btnexample_search").button().on("click", function(){
$("#example").DataTable().search($("input[type='search']").val()).draw();
});
}
您可以创建一个小提琴链接? –
看看这个。 https://datatables.net/forums/discussion/27829/add-table-footer-with-javascript-only –
好吧,它的工作,但这里预定义列是genarated,$(this).append(“