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 understanding was that they will be striped as soon as table sorter is initialized, is this not the case?

This is tablesorter v 2.10 (the latest) from here: .html

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 understanding was that they will be striped as soon as table sorter is initialized, is this not the case?

This is tablesorter v 2.10 (the latest) from here: http://mottie.github.io/tablesorter/docs/index.html

• javascript
• jquery
• css
• html-table
• tablesorter

Share Improve this question Follow asked Jul 11, 2013 at 20:35 csteifelcsteifel 2,94466 gold badges3737 silver badges6464 bronze badges 1

• Seems to work okay for me... Are you sure you have all the resources loaded? – Jivings Commented Jul 11, 2013 at 20:45

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

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.

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