jquery - jquery dataTables 插件可以在排序/过滤后尊重备用行颜色吗？

Question

我正在使用jquery datatables plugin这似乎是一个有用的插件，可以获取常规 html 表并添加排序、过滤、分页等

我看到的一个问题是，当我搜索时，它似乎没有更新“奇数”/“偶数”行类，所以如果我的表有 100 行，但当我过滤它有 10 行时，可能所有 10 行都是相同的背景色或8个相同的背景色

在按列排序后，我也看到了同样的问题，在按列排序后，它可能会“聚集”一堆具有相同背景色的行。

数据表插件是否可以在过滤器后重新应用偶数/奇数样式，以便无论您过滤什么，总是有备用行背景色？

Answer 1

原因

此功能默认可用。这种异常行为最有可能的原因是:

• 您覆盖 odd和even CSS 中的类，或者
• 您的代码会影响过滤后的表结构

解决方案#1

1. Default styling或jQuery UI或Foundation

   使用类display为您<table>如下所示。请参阅Default styling options查看所有可用类别的列表。

    <table id="example" class="display" cellspacing="0" width="100%">   
   

   参见this jsFiddle用于演示。

2. Bootstrap

   使用类table table-striped table-bordered为您<table>如下图:

    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
   

   参见this jsFiddle用于演示。

解决方案#2

如果有覆盖 odd 的 CSS 规则和even类，您可以指示 jQuery DataTables 使用替代类来代替 stripeClasses 选项。

$('#example').DataTable( {
  "stripeClasses": [ 'odd-row', 'even-row' ]
} );