2

我myTable基于手动添加的类（' myClass'）在表（''）中动态隐藏行。该表使用带有标准斑马条纹背景颜色的 Datables 插件。

有没有办法在手动隐藏该表中的行后保留这些斑马条纹？

这在使用标准 Datatables 函数对表进行排序和过滤时工作正常，所以我假设有一个允许这样做的设置。

我正在使用基于手动添加的类的简单显示/隐藏功能： 

$('.myClass').hide(); / $('.myClass').show();

这里有人可以帮我吗？

提前非常感谢，蒂姆。

4

2 回答 2

3

我也使用数据表。喜欢它，但不要使用为“斑马条纹”添加的类，哈哈。

如果您的用户超过 IE8，您可以让 CSS 这样做：

tr:nth-child(even) {
    background-color: #000000;
}

编辑：基于评论。如果您将隐藏行而不是删除它们，jQuery 是最好的答案。注意选择器中的“ :visible ”。使用 addClass 将是一个更好的调用，因此我们可以在对表进行条带化之前从 tr 选择器中删除类。

或者使用 jQuery：

$(document).ready(function()
{
    $("tr:visible:even").css("background-color", "#000000");
});
于 2014-05-04T23:18:45.507 回答
1

选定的解决方案将在图形上出现故障。如果您使用 css 设置基本样式，然后用给定的 jquery 覆盖它们，则每次过滤时都需要使用内联样式重置“奇数”和“偶数”。这绝对是一个选择，但我只是想给你另一个我今天刚刚实现的（因为这个完全在谷歌之上）：

首先，构建一个额外的表，如下所示：

<table id="filteredOutTable" style="display:none;">
  <tbody>
  </tbody>
</table>

然后使用 jquery 来移动数据，如下所示：

if(<move out of table>){
  $('#dataTableID tbody .rowClass').detach().appendTo('filteredOutTable tbody');
}
if(<move to table>){
  $('#filteredOutTable tbody .rowClass').detach().appendTo('#dataTableID tbody');
}

这比简单的内联样式要重一些，具体取决于您拥有的行数，但可以保证让您免于与斑马相关的图形问题。CSS 可以毫无问题地解决这个问题。

于 2015-12-23T20:57:59.277 回答