在排序/过滤后,jquery dataTables插件是否可以遵循备用行颜色？

Question

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

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

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

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

Answer 1

原因

默认情况下,此功能可用.很可能是这种不寻常行为的原因:

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

解决方案#1

1. 默认样式或 jQuery UI或 Foundation

   使用类display为您<table>,如下图所示.有关所有可用类的列表,请参阅默认样式选项.

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

   请参阅此jsFiddle进行演示.

2. 引导

   使用table table-striped table-bordered您的类,<table>如下所示:

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

   请参阅此jsFiddle进行演示.

解决方案#2

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

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

Answer 2

要归档这个,你必须使用Base样式 - 没有样式类 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;
}

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