大汤匙的斑马不加条纹直到排序。

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

这是汤匙v 2.10(最新的):http://mottie.github.io/汤匙orter/docs/index.html

3 个解决方案

#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.

您的问题很可能与这样一个事实有关:当您初始化表上的表时，表不可见(显示:none)。

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.

问题是，如果您的表隐藏了display: none或该表的父类隐藏了display: none，那么不到第一次排序，不会应用zebra小部件。

#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).

在大多数浏览器支持CSS3的情况下，您实际上不需要再使用zebra小部件，除非您计划过滤行(参见这个演示)。

Otherwise, try css that looks something like this:

否则，尝试一下这样的css:

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

#1