Hi all.
I am trying to create a set of options as filters for a DataTable. This is all dynamically generated, so I can't hard-code in things such as the column number to search on—in case that matters at all.
Basically I will have groups (one for each column of the DataTable) of checkboxes which the user can select as a "filter". I have a search plug-in working that allows for an "OR" search since they may select multiple strings to search on.
I have it working, but somewhere along the way I lose the ability to clear, or reset the search—so after "filters" have been checked ( search has been performed via table.draw() ) and then the user un-checks all of them (clearing all of the filters) there seems to still be a search which is technically empty and telling Datatables to search without any results so the table is blank.
I hope this makes sense. Here is my code...
var table = $('#submission-list').DataTable();
var search_array = [];
$('.zfilter-checkbox').each(function(){
$(this).change(function(){
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
if( this.checked ){
search_array.push( val );
}else{
if( search_array.includes( val ) ){
search_array.splice( val, 1 );
}
}
$.fn.dataTable.ext.search.push(
function( settings, data, index, rowData, counter ){
search_column = data[5].split(", ");
console.log( 'search column:' );
console.log( search_column );
console.log( 'search array:' );
console.log( search_array );
for( c=0; c < search_column.length; c++ ){
if( search_array.includes( search_column[c] ) ){
console.log('returned true');
return true;
}
}
console.log('returned false');
return false;
}
);
table.draw();
$.fn.dataTable.ext.search.pop();
});
});