Tablesorter zebra not strip before sorting

Question

I have my tables and they are great. I can sort them, and this works great, except that they do not execute a zebra strip until I sort them for the first time. I realized that they will be striped as soon as the table sorter is initialized, right?

This is tablesorter v 2.10 (last) from here: http://mottie.imtqy.com/tablesorter/docs/index.html

Answer 1

Your problem is most likely due to the fact that the table is not visible ( display: none ) when you initialize the tablesorter in your table.

A possible solution is to perform the following initialization only after the table is visible with:

 if($('tab_parent_of_the_table').is(':visible')) { $("your_table_table").tablesorter({ widgets: ['zebra'] }); } 

An even better solution is to wrap the visibility check with a timeout, since this is usually done before the visibility change is applied, which leads to a false statement. Do the following:

 setTimeout(function(){ if($('tab_parent_of_the_table').is(':visible')) { $("your_table_table").tablesorter({ widgets: ['zebra'] }); } }, 50); 

Answer 2

It turns out that the problem is that if your tables are hidden either with display: none , or the parent of the table is hidden with display: none , then the zebra widget is not applied until the first sort.

Answer 3

In most browsers that support CSS3, you no longer need to use the zebra widget unless you plan on filtering the lines (see this demo ).

Otherwise, try css, which looks something like this:

 table tbody > tr:nth-child(odd) > td, table tbody > tr:nth-child(odd) > th { background-color: #f9f9f9; }