Tablesorter zebra doesnt stripe till sort

Question

I have my tables and they are great I can sort them and it works wonderfully except that they don\'t do the zebra striping until I sort them for the first time. My understa

Answer 1

Your problem is most probably related to the fact that the table is not visible (display: none) when you initialize the tablesorter on your table.

A possible solution is to execute the following initialization only once 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 normally it is done before the change of visibility is applied, resulting in a false statement. Do like this:

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

Answer 2

With most browsers supporting CSS3, you don't really need to use the zebra widget anymore, unless you plan on filtering rows (see this demo).

Otherwise, try css that looks something like this:

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

Answer 3

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