DataTables：如何将类设置为表格行单元格（而不是表格标题单元格！）

Posted 2023-05-07

【中文标题】DataTables：如何将类设置为表格行单元格（而不是表格标题单元格！）

【英文标题】：DataTables: How to set classes to table row cells (but not to table header cells!)

【发布时间】：2012-06-14 13:43:05

【问题描述】：

我的桌子风格非常好。

抱歉，链接失效了

我必须添加 sClass 以便新行（由 fnAddData 添加）获得正确的类。

不幸的是，这破坏了我的布局，因为这些类也被添加到我的表头单元格中！

抱歉，链接失效了

如何将 sClass 配置为仅适用于 TBODY 单元？

澄清一下：

  var rolesTable = $('#roles').dataTable(
      "aoColumns": [
         "mDataProp": "id", "sClass": "avo-lime-h avo-heading-white" ,
         "mDataProp": "name", "sClass": "avo-light" ,
         "mDataProp": "module", "sClass": "avo-light" ,
         "mDataProp": "description", "sClass": "avo-light" ,
         "mDataProp": null, "bSearchable": false, "bSortable": false, 
          "sDefaultContent": '<button type="button" name="add" class="btn"><i class="icon-plus icon-white"></i></button>' , 
      ],
  ); // end od dataTable

我打电话的时候这样

rolesTable.fnAddData(  
    "id": 10, 
    "name": "testname", 
    "module": "testmodule", 
    "description": "testdescription" 
 );

那么添加的行如下所示：

<tr>
    <td class="avo-lime-h avo-heading-white">10</td>
    <td class="avo-light">testname</td>
    <td class="avo-light">testmodule</td>
    <td class="avo-light">testdescription</td>
    <td></td>
</tr>

这完全是好的

**问题是**此设置还将这些类添加到：

<thead>
    <tr> (...) </tr>
</thead>

表头单元格...我不想要的

【问题讨论】：

请贴出与问题相关的代码。理想情况下，除了问题本身的代码之外，请添加jsFiddle 问题示例。它将帮助我们帮助您。

我不知道我可以在不投票的情况下标记“已接受”...直到最近我的分数太低而无法投票

【参考方案1】：

我的问题的解决方案是：使用 fnRowCallback 而不是 sClass 将类设置为新行。

  var rolesTable = $('#roles').dataTable(
      "aoColumns": [
         "mDataProp": "id" ,
         "mDataProp": "name" ,
         "mDataProp": "module" ,
         "mDataProp": "description" ,
         "mDataProp": null, "bSearchable": false, "bSortable": false, 
          "sDefaultContent": '<button type="button" name="add" class="btn btn-round"><i class="icon-plus icon-white"></i></button>' , 
      ],
      "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) 
          $('td:eq(0)', nRow).addClass( "avo-lime-h avo-heading-white" );
          $('td:eq(1),td:eq(2),td:eq(3)', nRow).addClass( "avo-light" );
        
  ); // end od dataTable

【讨论】：

这段代码的问题是你在每次抽牌时都在尝试addClass。在某些情况下，这可能会导致性能问题。更好的解决方案是在表初始化之后和动态添加数据之后添加类。请参阅线程here 进行讨论。

【参考方案2】：

由于您仅使用 sClass 将样式应用于表格，因此解决问题的简单方法是将 CSS 本身修改为仅应用于 td 元素。

旧 CSS 样式：

.avo-light 
    color: blue;

新的 CSS 样式：

td.avo-light 
    color: blue;

这样，尽管 sClass 也应用于元素，但 CSS 只会影响您有兴趣应用样式的单元格。

我意识到这个问题有点老了，但我发现它比最佳解决方案更加模块化。

【参考方案3】：

之前设置默认类。

$.fn.dataTableExt.oStdClasses.sStripeOdd = '';

$.fn.dataTableExt.oStdClasses.sStripeEven = '';

更多参考请看这里 http://www.datatables.net/styling/custom_classes

【参考方案4】：

  let table = $("#myTable").dataTable();
  table.rows().every(function(rowIdx, tableLoop, rowLoop)
    $(this.node().cells[0]).addClass('red');
    $(this.node().cells[1]).addClass('blue');
  

表格呈现后，使用每行的 javascript 选择器遍历所有行，并进行所需的任何更改。这解决了 gamliela 在 loostr 的回答中提出的性能问题。 DataTables rows().every() documentation

【讨论】：

为我工作。我通过 Ajax 加载数据，所以必须用 initComplete 包装它 - datatables.net/reference/option/initComplete