leora leora - 5 months ago 10
Javascript Question

jquery tablesorter plugin - retain alternative row colors

I took an html table that I am applying alternative row colors to, and I added jquery table sorter on it so users can sort the table.

The issue is that the alternative row colors are all messed up now as (based on the sorting) there are multiple rows with the same background color.

Is there any way to reset the alternative row color with jquery table sorter?


There's already a default widget zebra, built into the core, which applies the classes odd and even to alternate rows. It works whether or not you have added class=even/odd to the html file.

It's really easy to set up. I simply followed the instructions on the table sorter website, and then modified the document ready function to the following:

<script type="text/javascript">
    widgets: ['zebra'] 

To prove that it's easy to set up, here's what I made while I was trying to answer your question. I've also zipped all the code into one file. I used the Blue Skin theme that you can download from the tablesorter website.