How to hide rows wich have not a class in multiple tables (and restore them)?

JustMe

Hello!

I have four datatables, all are in jquery tabs - so there is always only one visible. If you click on tab2 you'll see the datatable in it, click on tab3,,, and so on.

Every <tr> tag has multiple css classes which I want to use to filter the rows.
Example: <tr class="sp-243 sp-453 th-1009 va-885">
If the user select a filter, lets say "sp-243", I want to hide all <tr>'s which do not have that class - in all datatables (the hidden ones too).
Also I want a button that brings all hidden rows back.
I found this code:

$("#hideit").click(function() {
    var tables = $(".eventstable").DataTable();
    $.fn.dataTable.ext.search.push(
        function(settings, data, dataIndex) {
            return $(table.row(dataIndex).node()).hasClass("sp-884");
        }
    );
    table.draw();
});

$("#resetfilters").click(function() {
    var tables = $(".eventstable").DataTable();
    $.fn.dataTable.ext.search.pop();
    table.draw();
});

If I click the button #hideit, it hides correctly on the first table - the other three tables have no rows at all - eaven there are <td>'s with that css class.
Also the #resetfilters button works only if I click twice on it. On first click only 2 of 4 tables are reseted. If I click again the other two are restored too.

How can I fix this? Or, what is the right way to do this?

colin

Hi @JustMe ,

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