Targeting specific table with custom filtering

DTaylor

I was using this as a reference for creating custom filtering. As noted in the comments, using $.fn.dataTable.ext.search.push will apply the filter to all tables. I am trying to create a generic service in my angular project to handle all of my data table functions. I am passing the dtInstance to these generic functions. Has there been any work done to expose the filtering functionality on the dtInstance object so that I don't have to use the global filter?

allan

Yup - this is a real pain point in the API. I'm going to address this in v2, but until then what you can do is use the nTable property of the settings object passed into the search function. nTable there is the table node, so you can check against the node itself or its id if you know that - then return true if it isn't the table you want, or perform the search logic required if it is your target table.

Allan

DTaylor

Just for anyone curious here is how I solved my specific issue.

    removeFilters(tableElement: ElementRef) {
        $.fn.dataTable.ext.search = [];
        $.fn.dataTable.ext.search.push(
            function (settings, data, dataIndex) {
                if (settings.nTable.id === tableElement.nativeElement.id) {
                    return true;
                } else if (settings.aiDisplay.indexOf(dataIndex) > 0) {
                    return true;
                }

                return false;
            }
        );
    }

I have multiple tables on a page with their own filtering logic. The issue I was facing was that since '$.fn.dataTable.ext.search' is a global collection, when I would deselect a filter on a specific table and call the function that clears the filtered collection, it would remove the filters for all tables in the DOM. Using the info from allan, I was able to remove all of the filters from my specific table and then for all other tables, just return the rows that are already displayed to preserve the filters applied on those tables.