Javascript 如何向页脚中DataTable的某些单独列添加搜索?
我需要将不同类型的过滤(文本框、下拉列表)添加到DataTable中的某些(!)单独列的页脚中。也就是说,我希望能够通过一列搜索我添加到页脚的每个过滤器,过滤器的类型将取决于一列,例如,对于第0列,它是一个文本框,对于第1列,它是一个下拉列表,对于第5列,它是一个日期选择器 下面是一个测试示例。注意构造函数的新类型(DataTable,而不是DataTable)Javascript 如何向页脚中DataTable的某些单独列添加搜索?,javascript,html,jquery,datatables,jquery-events,Javascript,Html,Jquery,Datatables,Jquery Events,我需要将不同类型的过滤(文本框、下拉列表)添加到DataTable中的某些(!)单独列的页脚中。也就是说,我希望能够通过一列搜索我添加到页脚的每个过滤器,过滤器的类型将取决于一列,例如,对于第0列,它是一个文本框,对于第1列,它是一个下拉列表,对于第5列,它是一个日期选择器 下面是一个测试示例。注意构造函数的新类型(DataTable,而不是DataTable) 怎么了?你需要做两件事 将tfoot添加到表中,使其有空间添加它 $("#my-table").DataTable({ /
怎么了?你需要做两件事
- 将tfoot添加到表中,使其有空间添加它
$("#my-table").DataTable({
//.....
, 'initComplete': function (settings, json) {
var cl = this.api().columns(1); //2nd column
$(cl.footer()).html("fdsfds"); //doesn't work
//this.api().columns().every(function(){
//var column = this;
//$(column.footer()).html('fdsfsdfd'); //doesn't work either
//});
//neither this
//var api = this.api();
// $(api.column(1).footer()).html('dsfs2222');
});
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="4" style="text-align:right">Total:</th>
<th></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
$(document).ready(function() {
$('#example').DataTable({
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
$(api.column(1).footer()).html("test text");
}
});
});