After sorting table, The alternate row color in table row is not working

Question

i am using a table with alternate row color and the same table has sorting functionality with jquery.tablesorter.js. as follow.

css can be applied for alternative row like.

              $("tr:even",$(this)).css({'backgroundColor':'#ffffff'});
              $("tr:odd",$(this)).css({'backgroundColor':'#ebf0f5'});

sorting can be done by

             function sortTable(tableID)
                {
                     $("#"+tableID).tablesorter();      
                }

First time alternative row color works fine.

But When I sort the records the format has been changed. and alternative row color is not working.

Any help will be appreciated.

Answer 1

Use the zebra widget:

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

Answer 2

after sort completed you can run this jquery code:

$("table <make it more specific!>").find("tr").removeClass("alt").filter(":odd").addClass("alt");

Here is the jsFiddler code .

Answer 3

Use this:

$('#table').tablesorter({
    widgets     : ['zebra'],
    widgetZebra : {
        css: ['your_even_css_class_name', 'your_odd_css_class_name']
    }
});

And remove this:

$("tr:even",$(this)).css({'backgroundColor':'#ffffff'});
$("tr:odd",$(this)).css({'backgroundColor':'#ebf0f5'});