DataTables：如何设置类到表格单元格（但不是表格单元格！）

Question

我对表格有一个非常好的样式。

{对不起环节没有更多的工作}

我不得不添加的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> 

而且是完全OK

**问题**这个设置也增加了这些类：

<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

设置之前的默认类。

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

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

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

Answer 3

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

旧的CSS样式：

.avo-light { 
    color: blue; 
} 

新的CSS样式：

td.avo-light { 
    color: blue; 
} 

这样的CSS只会影响您有兴趣，尽管的sclass应用样式到细胞应用于th元素以及。

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

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选择器迭代所有行并进行所需的更改。这解决了gosliela在loostr的回答中提出的性能问题。 DataTables rows().every() documentation