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

Posted 2023-05-07

【中文标题】jquery dataTables 插件可以在排序/过滤后尊重备用行颜色吗？

【英文标题】：Can the jquery dataTables plugin respect alternate row colors after sorting/filtering?

【发布时间】：2015-08-27 16:29:14

【问题描述】：

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

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

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

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

【问题讨论】：

此功能默认可用，请参阅Default styling options。你确定你正在使用display 类或至少stripe 类用于<table>？

过滤行后似乎不成立

您能否提供一个链接到您的页面或 JSFiddle 上的示例来演示该问题？您使用的是什么版本的 DataTables？您的 DataTables 初始化选项是什么？

第二次请求代码示例。 DataTables 肯定会在重绘时更新条带化。听起来您可能正在从插件外部处理过滤，在这种情况下您肯定会遇到问题。没有看到代码就忍不住

【参考方案1】：

原因

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

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

解决方案 #1

Default styling 或 jQuery UI 或 Foundation

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

 <table id="example" class="display" cellspacing="0" >   

请参阅this jsFiddle 进行演示。

Bootstrap

为您的<table> 使用类table table-striped table-bordered，如下所示：

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

请参阅this jsFiddle 进行演示。

解决方案 #2

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

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

【参考方案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');
            
          
    );

请注意：

为了避免 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/

【讨论】：

此功能默认可用，见Base style，无需使用rowCallback。

【参考方案3】：

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

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

因此，如果您想完全删除奇偶类，请在表初始化期间使用以下参数。

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

所以 如果你想在每一行数据表上应用自定义 css 类。

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

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

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

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

【参考方案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 )
    
  
,