Bundled Datatables code issue

GusBeare

I am using some code I found to create drop down filters for a number of cols. The code works great using this:

//Get a reference to the new datatable
var table = $('#BookingTable').DataTable();

var schoolIndex = 0;
$("#BookingTable th").each(function (i) {
    //console.log(this);
    if ($($(this)).html() == "School") {
        //console.log(this);
        schoolIndex = i; return false;
    }
});
//Use the built in datatables API to filter the existing rows by the School column
$.fn.dataTable.ext.search.push(
    function (settings, data, dataIndex) {
        var selectedItem = $('#schoolFilter').val();
        var school = data[schoolIndex];
        if (selectedItem === "" || school.includes(selectedItem)) {
            return true;
        }
        return false;
    }
);
//Set the change event for the Category Filter dropdown to redraw the datatable each time
//a user selects a new filter.
$("#schoolFilter").change(function (e) {
    table.draw();
});

My application uses Datatables on many pages and I decided to bundle my js into a single file. However, once I did this I discovered that the code file containing the above code causes problems with other datatables on different pages. Other tables appear to render fine but the data appears and then vanishes.

I expect that this code:

$.fn.dataTable.ext.search.push(

Is targetting any table on the page and not finding search parameter which would be null.

Can anyone suggest how to solve this? I am not sure how to make this target only the booking table:

$.fn.dataTable.ext.search.push(

thanks for any suggestions

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

GusBeare

Thanks. I thought there might be a simple answer but building a test case is a lot of work for me right now when am under pressure to deliver. So for now I've removed this js from the bundle and it's loaded separately. Not ideal but works around the issue for now.

kthorngren

You can use settings.sTableId in the search plugin to determine the table it filters. See this thread for more details.

Kevin

GusBeare

I looked at the docs and realised the code I had found and copied was not very clever.

I went to this instead:

var table = $('#BookingTable').DataTable();

 /* SCHOOL filter for data table */
 $("#schoolFilter").change(function (e) {
     table.search(this.value).draw();
 });

This solved it for me.