Datatables: keep zebra stripes after hiding / showing table rows

Question

I am hiding rows dynamically in a table ('myTable') based based on manually added classes ('myClass'). The table uses the Datables plugin with the standard zebra-striped background colors.

Is there a way to keep these zebra stripes after manually hiding rows in that table ?

This works fine when sorting and filtering the table by using the standard Datatables functions so I assume there is a setting that allows this.

I am using a simple Show / Hide function based on a class that I add manually:

$('.myClass').hide(); / $('.myClass').show();

Can someone here help me with this ?

Many thanks in advance, Tim.

Answer 1

I use datatables as well. Love it but dont use the added classes for 'zebra stripes' lol.

If your users are past IE8 you could just let CSS do it like so:

tr:nth-child(even) {
    background-color: #000000;
}

EDIT: Based on comment. If you will be hiding rows rather than removing them jQuery is the best answer. Note the ":visible" in the selector. Using addClass would be a better call hence we could removeClass from the tr selector before we stripe the table.

Or use jQuery:

$(document).ready(function()
{
    $("tr:visible:even").css("background-color", "#000000");
});

Answer 2

The selected solution will get graphically glitchy. If you set the base style with css and then overwrite them with the given jquery, you will need to reset both the "odd" and "even", with inline styling every time you filter. This is definitely an option, but I just wanted to give you another one which I implemented just today (because this one is quite on top of google):

First, build an extra table like this:

<table id="filteredOutTable" style="display:none;">
  <tbody>
  </tbody>
</table>

Then use jquery to move around the data, like this:

if(<move out of table>){
  $('#dataTableID tbody .rowClass').detach().appendTo('filteredOutTable tbody');
}
if(<move to table>){
  $('#filteredOutTable tbody .rowClass').detach().appendTo('#dataTableID tbody');
}

This is a tad heavier than simple inline styling depending on the amount of rows you have, but it's guaranteed to save you from zebra-related graphical issues. CSS will work with this without problems.