Zebra tablesorter does not stripe on initial sort

Question

I have a problem with the tablesorter plugin and the zebra widget, which enable different styles for even/odd rows.

My page starts with an empty table; then, the user compiles a form, and then my table is loaded...so the problem is: on initial load (which also sort a column) the zebra striping doesn't work; my rows have all the same background-color.. but when the user starts sorting columns or going to other page results (with the "pager" addon on the same table), the zebra widget works.

What is wrong?

Jquery version: 1.9.0

tablesorter version: 2.7.12

Here is my javascript code:

$("table").tablesorter({
    widthFixed: true,
    sortList: [[3,0]],
    widgets: ["zebra"],
    widgetOptions:{
        zebra: ["even","odd"]
    }
});

Thanks in advance!

Answer 1

You can use a css only solution and back it up with jQuery for ie8 and lower

look at fiddle here: http://jsfiddle.net/GZPqE/

<table class="zebra">
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
        <td>col 4</td>
    </tr>
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
        <td>col 4</td>
    </tr>
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
        <td>col 4</td>
    </tr>
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
        <td>col 4</td>
    </tr>
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
        <td>col 4</td>
    </tr>
</table>

/*CSS*/
.zebra tr:nth-child(even) {
  background-color: #333;
  color: #fff;
}

/*
 * uncomment this to see the jQuery solution
 $("tr:nth-child(even)").css({"background-color":"blue", "color":"#fff"});
 */

Answer 2

Use CSS to color your even and odd rows:

$("table")
  .tablesorter({
    widthFixed: true,
    sortList: [[3,0]],
    widgets: ["zebra"],
    widgetOptions:{
      zebra: ["even","odd"]
    }
  })
  .find('tr:nth-child(even)')
    .css('background-color', 'white')
    .end()
  .find('tr:nth-child(odd)')
    .css('background-color', 'lightgray')
    .end();