How do I populate table.DataTable.fnSettings.aoFooter for a dynamically generated table?

datatables, jquery

Solution

I had the same problem.

You must add `tfoot` section to your 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>

And then you have just to call datatable plugin.

Problem

I'm trying to use the Column Filter add-on for my jQuery DataTable. The HTML for the table is simply this: ``` <table id="something" class="some_classes"></table> ``` ...and all the contents including the header text are pushed via code: ``` 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... ], ... }); ``` When I try to activate the column filter as such: ``` $('#something').dataTable().columnFilter({ aoColumns: [ null, { type: "select", values: ['A', 'B', 'C', 'D', 'E'] }, { type: "select", values: ['1', '2', '3'] }, etc... ] }); ``` ...nothing appears. I've gone through the code, debugging to console, and the problem seems to be that the table's fnSettings().aoFooter isn't being populated. The column filter code looks for that in order to add the filters to the bottom of the table, but when it looks at my table there's nothing there but an empty array. I know for a fact that the code is executing, and if I assign aoFooter = aoHeader then the filters show up in the header, so for sure the code works when it has somewhere to go. I've also tried running the column filter code from the console, to no avail, even after appending `<tfoot><tr><th></th>...</tr></tfoot>` to it (which I kind of suspected wouldn't work before I tried it). I've also tried things like `oTable.dataTable().fnSettings().aoFooter = [{},{},{},{},{},{}];` and gotten nowhere. I've also tried this: ``` for (i = 0; i < 6; i++) oTable.dataTable().fnSettings().aoFooter[i] = $('<td></td>'); ``` So my problem seems to be how to effectively push content to aoFooter. Does anyone have any ideas?

Original source