Tablesorter斑马没有条纹直到排序

Question

我有我的桌子，他们很棒，我可以对它们进行排序，它的效果非常好，除非它们不进行斑马条纹，直到我第一次对它们进行排序。 我的理解是，一旦表分拣机初始化它们就会被条纹化，是不是这样呢？

这是来自这里的tablesorter v 2.10（最新版）： http ： //mottie.github.io/tablesorter/docs/index.html

Answer 1

您的问题很可能与您在表上初始化tablesorter时表不可见（ display: none ）有关。

一种可能的解决方案是只有在表可见时才执行以下初始化：

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

更好的解决方案是使用超时包装可见性检查，因为通常在应用可见性更改之前完成，从而导致错误语句。 这样做：

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

Answer 2

事实证明，如果您的表隐藏了display: none或者表的父级隐藏了display: none则在第一次排序之前不会应用zebra小部件。

Answer 3

由于大多数浏览器都支持CSS3，因此您不再需要使用zebra小部件，除非您计划过滤行（请参阅此演示 ）。

否则，尝试看起来像这样的css：

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