数据表：如何设置类表行细胞（而不是表头细胞！）(DataTables: How to set cla

我有一个非常好的风格我的表。

{抱歉，链接没有更多的工作}

我不得不添加的sclass使新行（由fnAddData加）得到正确的类。

不幸的毁了我的布局，becouse这些类也将被添加到我的表头的单元格！

{抱歉，链接没有更多的工作}

如何配置的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>

表头细胞......我不想

Answer 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

Answer 2:

既然你只使用的sclass申请造型表中简单的解决问题的方法是修改CSS本身仅适用于td元素。

旧的CSS样式：

.avo-light {
    color: blue;
}

新的CSS样式：

td.avo-light {
    color: blue;
}

通过这种方式，CSS只会作用的细胞，你有兴趣，尽管的sclass应用样式应用到TH元素。

我意识到这个问题是有点老了，但我觉得它不是最好的解决方案大幅更加模块化。

Answer 3:

之前设置默认类。

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

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

如需进一步引用在这里看到http://www.datatables.net/styling/custom_classes

Answer 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: How to set classes to table row cells (but not to table header cells!)