jquery dataTables 插件可以在 sorting/filtering 之后尊重交替行颜色吗？

Question

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

我看到的一个问题是，当我搜索时，它似乎没有更新 "odd" / "even" 行类所以如果我的 table 有 100 行但是当我过滤它有 10 个时，可能是所有 10 个都是相同的背景颜色或者 8 个是相同的背景颜色

我在按列排序后也看到了同样的问题，在我按列排序后它可能 "bunch up" 一堆具有相同背景颜色的行。

datatables 插件是否可以在过滤器后重新应用 even/odd 样式，因此无论您过滤什么，总是有交替的行背景颜色？

Answer 1

要存档，您必须使用 Base style - no styling classes datatable 为此，只需从 table tag

中删除数据table 类

在此之后为 odd（例如 myodd ）和 even（例如 myeven ）行创建您自己的类。

现在下一个任务是将这些类应用到每个 table 绘制的 table 行意味着：

1. 应用过滤器时

2.当可见记录的限制改变时等

要做到这一点，数据表提供了 rowCallback() 你可以这样使用它：

 $('#myTabel').dataTable({
        "rowCallback": function( row, data, index ) {
            if(index%2 == 0){
                $(row).removeClass('myodd myeven');
                $(row).addClass('myodd');
            }else{
                $(row).removeClass('myodd myeven');
                 $(row).addClass('myeven');
            }
          }
    });

请注意：

为了避免 css rule 中的 !important，为 odd、even 行定义 css rule，如下所示：

table.dataTable tbody tr.myeven{
    background-color:#f2dede;
}
table.dataTable tbody tr.myodd{
    background-color:#bce8f1;
}

演示： http://jsfiddle.net/ishandemon/4za80xky/

Answer 2

原因

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

您在 CSS 或

odd

even

过滤后您的代码会影响 table 结构

解决方案 #1

Default styling or jQuery UI or Foundation

为您的 <table> 使用 class display，如下所示。请参阅 Default styling options 以获取所有可用 classes 的列表。
```
 <table id="example" class="display" cellspacing="0" width="100%">   
```
请参阅 this jsFiddle 进行演示。
Bootstrap

为您的 <table> 使用 classes table table-striped table-bordered，如下所示：
```
 <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
```
请参阅 this jsFiddle 进行演示。

解决方案 #2

如果有 CSS 规则覆盖 odd 和 even classes 你可以指示 jQuery DataTables 使用替代 classes 而不是 stripeClasses 选项。

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

Answer 3

我的这条评论适用于 如何删除或修改 Jquery 数据表行 classes

Datatables 现在提供一个可选的 json 参数，其名称与其 1.10+ documentation 的定义相同。

所以如果你想完全删除奇偶classes然后在表初始化期间使用以下参数。

$('#example').dataTable( {
  "stripeClasses": [] //Empty Array.
} );

所以 如果你想在 Datatables 的每一行上应用自定义 css class 那么。

$('#example').dataTable( {
  "stripeClasses": ['yourRowClass']
} );

如果您想应用超过 1 个 css class（以奇偶或顺序方式） 这样 classes将在每第 n 行完成后重复它们，然后使用此

$('#example').dataTable( {
  "stripeClasses": [ 'strip1', 'strip2', 'strip3' ] //This combination will repeat always 3rd row
} );

DataTables 将按顺序应用每个 class，在需要时循环。

Answer 4

我知道这已经过时了，但我不得不扩展上述解决方案。我允许用户调整条纹颜色，所以我必须这样做：

rowCallback: (row, data, index) => {
  const stripeColor = this.options.stripeColor;

  if (index % 2 == 0) {
    $(row).removeClass('odd-row even-row');
    $(row).addClass('odd-row');

    if (!!this.options.stripe) {
      $(row).css({ background: 'transparent' })
    }
  } else {

    $(row).removeClass('odd-row even-row');
    $(row).addClass('even-row');

    if (!!this.options.stripe) {
      $(row).css({ background: stripeColor })
    }
  }
},

jquery dataTables 插件可以在 sorting/filtering 之后尊重交替行颜色吗？

Can the jquery dataTables plugin respect alternate row colors after sorting/filtering?

sorting

jquery

jquery-plugins

datatables

styling

原因

解决方案 #1

解决方案 #2