Bundled Datatables code issue
Bundled Datatables code issue
GusBeare
Posts: 11Questions: 4Answers: 0
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
This question has an accepted answers - jump to answer
Answers
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
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.
You can use
settings.sTableIdin the search plugin to determine the table it filters. See this thread for more details.Kevin
I looked at the docs and realised the code I had found and copied was not very clever.
I went to this instead:
This solved it for me.