Question

我正在尝试使用我的jQuery DataTable的Column Filter插件。表格的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。有没有人有任何想法？

Answer 1

我遇到了同样的问题。

您必须将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插件。

如何为动态生成的表填充table.DataTable.fnSettings.aoFooter？

1 个答案: