Filter by column issue

jdoens

I'm following this https://datatables.net/examples/api/multi_filter.html but get an error:

Uncaught TypeError: Cannot read property 'columns' of undefined
at HTMLDocument.<anonymous> (test.aspx:7382)
at c (jquery-1.10.2.min.js:4)
at Object.fireWith [as resolveWith] (jquery-1.10.2.min.js:4)
at Function.ready (jquery-1.10.2.min.js:4)
at HTMLDocument.q (jquery-1.10.2.min.js:4)

I've declared var dttable as a global variable at the top.

My DataTable populates great. I'm running this code after my function that fills my DataTable:

        dttable.columns().eq(0).each(function (colIdx) {
            $('input', table.column(colIdx).header()).on('keyup change', function () {
                that
                    .column(colIdx)
                    .search(this.value)
                    .draw();
            });
        });

It throws the error above on the first line. Any ideas what I'm doing wrong?

tangerine

I've declared var datatable as a global variable at the top.

If that var is to store your DataTable object, then you should be using it instead of "dttable".

dttable.columns()           // probably wrong

jdoens

should I just be accessing it with $('#tablename').DataTable().columns?

jdoens

Here is the code I have:

        var dttable;

        function populateTable(data) {
            dttable = $('#dtTable').DataTable({
                "aaData": data.d,
                "columns": [
                    { "data": "col1" },
                    { "data": "col2" },

                ]
            });
        }

        $('#dtTable tfoot th').each(function () {
            var title = $(this).text();
            $(this).html('<input type="text" placeholder="Filter..." />');
        });

        dttable.columns().every(function () {
            var that = this;

            $('input', this.footer()).on('keyup change', function () {
                if (that.search() !== this.value) {
                    that
                        .search(this.value)
                        .draw();
                }
            });
        });

jdoens

I think I know what's happening. The function isn't called before those others are hit causing the method to not show yet for dttable

tangerine

Now that you have edited your original post, where you said

I've declared var datatable as a global variable at the top.

my post is redundant.

jdoens

I meant to make a note that I had edited the variable. Regardless, I am still getting the same error.

kthorngren

The function isn't called before those others are hit causing the method to not show yet for dttable

Did you resolve this?

If not you haven't assigned the Datatable API to dttable when this line executes:

dttable.columns().every(function () {

Kevin

jdoens

I have a somewhat large json result coming in (around 7k rows with 15 columns). I have a separate ajax call that then calls the populateTable function. How can I make sure that dttable variable is assigned before the dttable.columns() is called? I tried throwing that in the initComplete, but that doesn't work. Does anyone have any ideas?

Thank you all for your help! I truly appreciate it.

kthorngren

You should be able to put it in initComplete but you would need to do something like this:

$('#dtTable').DataTable().columns().every(function () {

The variable won't be assign the Datatable instance until the DataTable() function is complete.

Kevin

jdoens

That worked.Thank you both for your help!