我正在尝试为我的jQuery DataTable使用列过滤器加载项。该表的HTML就是这样:
<table id="something" class="some_classes"></table>
...并且所有内容(包括标题文本)都通过代码推送:
oTable = $("#something").dataTable({
...
aoColumns: [
{ sTitle: 'ID', sWidth: '5%', mData: 0 },
{ sTitle: 'Subject', sName: 'on_what', mData: 1 },
{ sTitle: 'Action', sName: 'audit_type', mData: 2 },
etc...
],
...
});
当我尝试像这样激活列过滤器时:
$('#something').dataTable().columnFilter({
aoColumns: [
null,
{
type: "select",
values: ['A', 'B', 'C', 'D', 'E']
},
{
type: "select",
values: ['1', '2', '3']
},
etc...
]
});
...什么都没有出现。我遍历了代码,调试到控制台,问题似乎出在表的fnSettings()。aoFooter中。为了将过滤器添加到表的底部,列过滤器代码进行了查找,但是当它查看我的表时,除了空数组之外,什么都没有。我知道代码正在执行的事实,如果我分配aoFooter = aoHeader,则过滤器会显示在标题中,因此可以肯定代码在有地方可用时可以工作。
我还尝试过从控制台运行列过滤器代码,即使将
<tfoot><tr><th></th>...</tr></tfoot>
附加到它之后也无济于事(在尝试之前,我怀疑这是行不通的)。我也尝试过oTable.dataTable().fnSettings().aoFooter = [{},{},{},{},{},{}];
之类的方法,却一无所获。我也尝试过这个:for (i = 0; i < 6; i++)
oTable.dataTable().fnSettings().aoFooter[i] = $('<td></td>');
所以我的问题似乎是如何有效地将内容推送到aoFooter。有人有什么想法吗?
最佳答案
我有同样的问题。
您必须将tfoot
部分添加到html table
中。
<table id="data-table" >
<thead>
<tr>
<th> col 1</th>
<th>col 2</th>
</tr>
</thead>
...
<tfoot>
<tr>
<td> col 1</td>
<td>col 2</td>
</tr>
</tfoot>
</table>
然后,您只需要调用datatable插件即可。