jquery tablesorter plugin - retain alternative row colors

Question

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?

Answer 1

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">
$(document).ready(function() 
    { 
        $("#myTable").tablesorter({ 
    widgets: ['zebra'] 
    }); 
    } 
); 
</script>

I made an example while answering the question. You can view the result in action, or see the example code.