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

Niacin

Seems to work okay for me... Are you sure you have all the resources loaded? – Alaska

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

Congratulation

Once the table is visible, you can apply the zebra widget using $('#your-table').trigger('update', [true]) – Millstone

The official documentation recommends using $('#your-table').trigger('applyWidgets'); ( mottie.github.io/tablesorter/docs/example-widget-zebra.html ) – Run

Answer 2

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.

Niacin

Once the table is visible, you can apply the zebra widget using $('#your-table').trigger('update', [true]) – Millstone

Answer 3

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

Petua

Ya thats the thing is I do need to support filtering – Niacin

Well, then you just need to use the applyWidgets method whenever the table becomes visible - e.g. see this answer on how to use tablesorter within jQuery UI tabs. – Petua

Is there any reason why it won't bother to try doing a zebra while its hidden? – Niacin

It's difficult to distinguish the difference between a table row being hidden by filtering or pagination versus the row being hidden because it is within a closed tab. Also, no zebra stripe class name is applied to hidden rows because it would only add more of a delay to apply the widget after each sort - this would be especially noticeable in large tables. – Petua