我需要将不同类型的过滤(文本框,下拉列表)添加到DataTable中的某些(!)单个列的页脚中。也就是说,我希望能够按一列搜索我添加到页脚的每个过滤器,并且过滤器的类型将取决于一列,例如,对于第 0 列,它是一个文本框,对于第 1 列,它是一个下拉列表,对于第 5 列,它是一个日期选择器。
下面是一个测试示例。请注意构造函数的新类型(数据表,而不是数据表)。
$("#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');
});
怎么了?
你需要在这里做两件事。
- 将
- tfoot 添加到您的表格中,以便它有一个空间来添加它
<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>
-
使用此处指定的页脚回调 http://datatables.net/examples/advanced_init/footer_callback.html 您还使用了列而不是列。
$(document).ready(function() { $('#example').DataTable({ "footerCallback": function ( row, data, start, end, display ) { var api = this.api(), data; $(api.column(1).footer()).html("test text"); } }); });