jQuery Datatables custom filtering not working on all tables

Question

I am using the jquery plug-in Datatables 1.10 and I want to use the custom search to filter two tables on the same page, like this:

function filterTableByErrorClass(propertiesTable, errorClassName) {
    $.fn.dataTable.ext.search.pop();
    $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
        return $(propertiesTable.row(dataIndex).node()).find('td > div').hasClass(errorClassName);
    });
    propertiesTable.draw();
}

My problem is that this only works for one of the table, the one that is ready when the page loads. The other one is inside a js modal and is loaded using an ajax call (see below). It is loaded as html and after it is loaded, it should behave the same as the other table, e.g. all filtering should be done client-side.

$("div.modal.edit-category-info").on('shown.bs.modal', function () {
    req = $.ajax({
        url: "some_url",
        method: "GET",
        success: function(data) {
            $('#modalContent').html(data);
            if ( $.fn.dataTable.isDataTable( '#edit-category-table' ) ) {
                editCategoryTable = $('#edit-category-table').DataTable();
            }
            else {
                editCategoryTable = $('#edit-category-table').DataTable( {
                "searching": false,
                "paging": false,
                "ordering": false,
                "bInfo" : false
                } );
            }
            errorValidator("edit-category-table");

            attachFilteringEvents("edit-category-form");
        },
    });
});

I have a button for both tables that triggers the filterTableByErrorClass() function, and I can verify that it gets called in both cases by placing a breakpoint in the first line in there. If I however place a breakpoint inside the filtering function (inside the filterTableByErrorClass()), that one only gets hit when I filter the first table, and not when I try to filter the modal table.

Is $.fn.dataTable.ext.search somehow unaware of the new modal table? Can I make it aware somehow?

Nanna Nanna · Accepted Answer · 2019-03-21T09:54:22

As it turns out, the problem was not related to the fact that the modal table was loaded later than the other one. The reason for why the filtering did not work on it was the configuration

"searching": false

which I had applied since there should not be a search box by the modal table.

After some debugging, I noticed that an internal variable in Datatables, bFilter, was set to false and this page explained to me that this is a side-effect of specifying searching as false. Not only does it hide the search box, but it also renders the whole table un-searchable.

To sum up, if I want to get rid of the search box from the table, but I still want to be able to apply my own filtering on the table by other means, I must switch out "searching": false in the configuration of the modal table and replace it with

"dom": 'lrtip'

which just hides the search box (by omitting f from the string) as is explained here and here.

jQuery Datatables custom filtering not working on all tables

1 Answers