preserve zebra striping with jquery tablesorter plugin

2
votes

The table on this page is sorted by the tablesorter plugin. The candy-striping is not re-applied after sorting, so the shaded and unshaded rows appear in the wrong sequence after a sort is performed. Click on the Name column to see an example of this.

Is there a way to redo the striping after a sort?

2
javascriptjquerycss
You think about using CSS odd/even rules and not have to worry about it. [well at least for browsers that support it.] - epascarello
I didn't know there are CSS odd/even rules, CSS3, I guess? - Dónal
.tablesorter tr:nth-child(even) will select the even rows of a table and .tablesorter tr:nth-child(odd) will select the odd rows: developer.mozilla.org/en/CSS/:nth-child - Jasper

2 Answers

10
votes

You have to use the zebra widget. Use the following piece of code to initialize the tablesorter:

$("table.tablesorter").tablesorter({
    widgets: ['zebra']
});

Zebra is the only widget included by default. See here for reference.

3
votes

I've also found that you can solve this problem like this:

$('your_table').tablesorter({
    widgets: ['zebra'],
    widgetZebra: { css: ['normal-row', 'alt-row' ] }
});

Found here: http://wowmotty.blogspot.com/2011/06/jquery-tablesorter-missing-docs.html

In my case, just initializing the zebra widget would not actually apply the table striping, even though I had the CSS classes .even and .odd defined (which I believe are the default classes that the zebra widget assigns).