Tablesorter zebra doesnt stripe till sort

问题

I have my tables and they are great I can sort them and it works wonderfully except that they don't do the zebra striping until I sort them for the first time. My understanding was that they will be striped as soon as table sorter is initialized, is this not the case?

This is tablesorter v 2.10 (the latest) from here: http://mottie.github.io/tablesorter/docs/index.html

回答1:

Your problem is most probably related to the fact that the table is not visible (display: none) when you initialize the tablesorter on your table.

A possible solution is to execute the following initialization only once the table is visible with:

if($('tab_parent_of_the_table').is(':visible')) {
    $("your_table_table").tablesorter({
       widgets: ['zebra']
    });
}

An even better solution is to wrap the visibility check with a timeout, since normally it is done before the change of visibility is applied, resulting in a false statement. Do like this:

setTimeout(function(){
    if($('tab_parent_of_the_table').is(':visible')) {
        $("your_table_table").tablesorter({
           widgets: ['zebra']
        });
    }
}, 50);

回答2:

Turns out the problem is that if your tables are hidden either with display: none or a parent of the table is hidden with display: none then the zebra widget is not applied until the first sort.

回答3:

With most browsers supporting CSS3, you don't really need to use the zebra widget anymore, unless you plan on filtering rows (see this demo).

Otherwise, try css that looks something like this:

table tbody > tr:nth-child(odd) > td,
table tbody > tr:nth-child(odd) > th {
    background-color: #f9f9f9;
}

来源：https://stackoverflow.com/questions/17602996/tablesorter-zebra-doesnt-stripe-till-sort

标签

javascript

jquery

css

html-table

tablesorter