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!

Is the table hidden when it is initialized? The zebra striping won't apply to hidden rows. — Mottie, Mar 19 '13 at 23:34
Possible duplicate of [Tablesorter zebra doesnt stripe till sort](https://stackoverflow.com/questions/17602996/tablesorter-zebra-doesnt-stripe-till-sort) — Federico G, Sep 10 '18 at 19:17

score 1 · Answer 1 · answered Mar 18 '13 at 18:29

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"});
 */

answered Mar 18 '13 at 18:29

Ady Ngom

1,284
2
10
12

Your solution works good on your fiddle but not on my page! :/ – vitosorriso Mar 18 '13 at 20:52
does your page have a public url, please share it and tell us too what browser you are using. – Ady Ngom Mar 18 '13 at 21:00
http://ltw1223.web.cs.unibo.it it's a project for university...i have to deliver it tomorrow afternoon! Now I re-changed the code, keeping the Zebra widget and removing your code.. Tried on chrome/firefox/opera...same result! – vitosorriso Mar 18 '13 at 21:20
I'm having trouble seeing the actual reference the page is in italian and even after using google translate I can't get to the table list – Ady Ngom Mar 18 '13 at 22:36
The table is filled through ajax call. You have to check at least one checkbox, and then you send the form through the button "Invia" to fill the table and the map! (The map is filled with locations in Bologna, Italy) – vitosorriso Mar 18 '13 at 22:42
this is what i get from an alert box Si è verificato un errore nel calcolo della distanza! – Ady Ngom Mar 18 '13 at 22:46
Have you allowed geolocalization in your browser for this site? Just because the table will show to you also the distance between your position and locations! – vitosorriso Mar 19 '13 at 00:12

score 0 · Answer 2 · answered Mar 18 '13 at 18:12

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();

Zebra tablesorter does not stripe on initial sort

2 Answers2