Question

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

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

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

无论如何，datatables插件可以在滤镜后重新应用偶数/奇怪的样式，所以无论你过滤什么，总有交替的行背色？

Answer 1

原因

默认情况下，此功能可用。很可能是这种不寻常行为的原因：

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

解决方案＃1

Default styling或jQuery UI或Foundation

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

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

解决方案＃2

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

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

Answer 2

要归档此内容，您必须使用Base style - no styling classes datatable 要执行此操作，只需从table tag

中删除数据表类

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

现在接下来的任务是将这些类应用于每个表绘制的表行：

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');
            }
          }
    });

请注意：

要避免!important css rule为css rule定义odd even，table.dataTable tbody tr.myeven{ background-color:#f2dede; } table.dataTable tbody tr.myodd{ background-color:#bce8f1; }这样的行：

try:
    import real_module
except SyntaxError:
    print('You need to run this with Python 3')

DEMO： http://jsfiddle.net/ishandemon/4za80xky/

Answer 3

我的这条评论适用于如何删除或修改Jquery Datatable Row类

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

所以如果你想完全删除奇数偶数类，那么在表初始化期间使用以下参数。

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

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

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

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

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

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

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插件是否可以遵循备用行颜色？

4 个答案:

原因

解决方案＃1

解决方案＃2