javascript - Tablesorter 斑马在排序前不会条纹

Question

我有我的桌子，它们很棒，我可以对它们进行分类，而且效果很好，只是它们在我第一次分类之前不会做斑马条纹。我的理解是，一旦表排序器初始化，它们就会被条带化，不是这样吗？

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

Answer 1

您的问题很可能与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那么斑马小部件直到第一次排序才会应用。

Answer 3

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

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

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