I am using the jquery plug-in Datatables 1.10 and I want to use the custom search to filter two tables on the same page, like this:
function filterTableByErrorClass(propertiesTable, errorClassName) {
$.fn.dataTable.ext.search.pop();
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
return $(propertiesTable.row(dataIndex).node()).find('td > div').hasClass(errorClassName);
});
propertiesTable.draw();
}
My problem is that this only works for one of the table, the one that is ready when the page loads. The other one is inside a js modal and is loaded using an ajax call (see below). It is loaded as html and after it is loaded, it should behave the same as the other table, e.g. all filtering should be done client-side.
$("div.modal.edit-category-info").on('shown.bs.modal', function () {
req = $.ajax({
url: "some_url",
method: "GET",
success: function(data) {
$('#modalContent').html(data);
if ( $.fn.dataTable.isDataTable( '#edit-category-table' ) ) {
editCategoryTable = $('#edit-category-table').DataTable();
}
else {
editCategoryTable = $('#edit-category-table').DataTable( {
"searching": false,
"paging": false,
"ordering": false,
"bInfo" : false
} );
}
errorValidator("edit-category-table");
attachFilteringEvents("edit-category-form");
},
});
});
I have a button for both tables that triggers the filterTableByErrorClass() function, and I can verify that it gets called in both cases by placing a breakpoint in the first line in there. If I however place a breakpoint inside the filtering function (inside the filterTableByErrorClass()), that one only gets hit when I filter the first table, and not when I try to filter the modal table.
Is $.fn.dataTable.ext.search somehow unaware of the new modal table? Can I make it aware somehow?