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.

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.

• javascript
• jquery-ui
• jquery
• jquery-ui-sortable

• How do you color the rows? if you're using CSS's :nth-child(odd/even), it should be ok. – yoavmatchulsky Commented Jun 29, 2011 at 7:02
• The last time I did some table sorting was a while ago, but from what I remember whichever JQuery sort routine I used did the alternate colours automatically. Perhaps if you post some of your HTML/CSS/JS? – nnnnnn Commented Jun 29, 2011 at 7:11
• hi i am using . $("tr:even",$(this)).css({'backgroundColor':'#ffffff'}); $("tr:odd",$(this)).css({'backgroundColor':'#ebf0f5'}); – Hardik Patel Commented Jun 29, 2011 at 7:33

3 Answers 3

Use the zebra widget:

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

after sort pleted you can run this jquery code:

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

Here is the jsFiddler code.

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