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.

How are you generating your Zebra stripes? Is it a class on each row? — Jason Sperske, May 04 '14 at 21:41
Datatables does that automatically. It looks like it just adds a class "odd" resp. "even" to each row to give them a grey and white background but they must have something built in that I cant find as they adjust the zebra stripes when you sort or filter the table. — user2571510, May 04 '14 at 21:57

Joe Johnston · Accepted Answer · 2015-12-23T16:41:58.573

4

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");
});

edited Dec 23 '15 at 16:41

answered May 04 '14 at 23:18

Joe Johnston

2,794
2
31
54

1

This will actually cause a graphical bug if you use filters (or the standard search machine). The rows will have an x chance of being the same color, as rows are hidden but still in the document. – NoobishPro Dec 23 '15 at 09:38
1

@Babydead Good catch. Updated the answer with tested code. :) – Joe Johnston Dec 23 '15 at 16:43
Good job. Now also add the "odd" rows, because you need to recolor them as well. Your way (through inline styling) means the rows keep said inline styling, no matter how much they shift. You either need to reset all rows back to a basic color first or color in both the even and odd. – NoobishPro Dec 23 '15 at 20:59
Understood. However, I wanted to answer the question as simply as possible. Without assuming the odd rows were 'other than' default. – Joe Johnston Dec 28 '15 at 17:06

score 1 · Answer 2 · answered Dec 23 '15 at 20:57

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.

Datatables: keep zebra stripes after hiding / showing table rows

2 Answers2