I have a use case where I'm presenting two checkboxes to a user. These checkboxes will both do different "searches" on the datatable and filter it appropriately. They look for the value of a data attribute on the <tr> element.
Individually they work fine. However I want them to chain together meaning when one is clicked, do that one and when another is clicked apply that one, along with the first one's value.
I can't get them to work together because when I toggle one off, I have to do
$.fn.dataTable.ext.search.pop();
and that removes both filters!
How can I remove the specific filter relating to just that checkbox?
Search application functions
function hidePickedRecords(){
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var oTable = new $.fn.dataTable.Api( settings ); // Get API instance for table
return $(oTable.row(dataIndex).node()).attr('data-picked-row') == 0;
});
}
function hideUnReadyRecords(){
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var oTable = new $.fn.dataTable.Api( settings ); // Get API instance for table
return $(oTable.row(dataIndex).node()).attr('data-fully-ready') == 1;
});
}
Event listeners for the checkbox changes:
// Hide Picked checkbox change
$("#hide-picked-checkbox").on("change", function(){
let showPickedRecords = $(this).is(":checked") ? 0 : 1;
if ( showPickedRecords ) {
$.fn.dataTable.ext.search.pop(); // removes filter already in place
}
else {
hidePickedRecords();
}
oTable.draw();
});
// Show Un-Ready checkbox change
$("#show-un-ready").on("change ", function(){
let showUnReadyRecords = $(this).is(":checked") ? 1 : 0;
if ( showUnReadyRecords ) {
$.fn.dataTable.ext.search.pop(); // removes any filter already in place
}
else {
hideUnReadyRecords();
}
oTable.draw();
});