Javascript DataTables：如何将类设置为表格行单元格（但不是表格标题单元格！）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10983721/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DataTables: How to set classes to table row cells (but not to table header cells!)
提问by ioleo
i have a really nice style for my tables.
我的桌子有一个非常好的风格。
{ sorry links no more working }
{抱歉链接不再有效}
I had to add sClass so that new rows (added by fnAddData) get the right classes.
我必须添加 sClass 以便新行（由 fnAddData 添加）获得正确的类。
Unfortunately that ruins my layout, becouse these classes are also added to my table-header cells!
不幸的是，这破坏了我的布局，因为这些类也被添加到我的表头单元格中！
{ sorry links no more working }
{抱歉链接不再有效}
How can I configure sClass to apply only for TBODY cells?
如何将 sClass 配置为仅适用于 TBODY 单元格？
To clarify:
澄清：
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
This way when i call
这样当我打电话时
rolesTable.fnAddData( {
"id": 10,
"name": "testname",
"module": "testmodule",
"description": "testdescription"
} );
then the added row looks like this:
然后添加的行如下所示：
<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>
AND that is perfectly OK
那是完全OK
** the problem is ** that this setting also adds these classes to:
** 问题是 ** 此设置还将这些类添加到：
<thead>
<tr> (...) </tr>
</thead>
table head cells... which I do not want
表头单元格......我不想要
回答by ioleo
Solution to my problem was:useing fnRowCallback instead of sClass to set classes to new rows.
我的问题的解决方案是：使用 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
回答by nicmoon
Since you are only using sClass to apply styling to the table the simple solution to your problem is to modify the CSS itself to only apply to the td elements.
由于您仅使用 sClass 将样式应用于表格，因此问题的简单解决方案是修改 CSS 本身以仅适用于 td 元素。
Old CSS style:
旧的 CSS 样式：
.avo-light {
color: blue;
}
New CSS style:
新的 CSS 样式：
td.avo-light {
color: blue;
}
This way the CSS will only effect the cells you are interested in applying the style to despite sClass being applied to th elements as well.
这样，尽管 sClass 也应用于 th 元素，CSS 只会影响您有兴趣应用样式的单元格。
I realize this question is a little old, but I find it substantially more modular than the best solution.
我意识到这个问题有点老了，但我发现它比最佳解决方案更加模块化。
回答by cs01
let table = $("#myTable").dataTable();
table.rows().every(function(rowIdx, tableLoop, rowLoop){
$(this.node().cells[0]).addClass('red');
$(this.node().cells[1]).addClass('blue');
}
After the table is rendered, iterate through all rows with the JavaScript selector of each row and make whatever changes you want. This addresses the performance concerns brought up by gamliela in loostr's answer. DataTables rows().every() documentation
表格呈现后，使用每一行的 JavaScript 选择器遍历所有行，并进行您想要的任何更改。这解决了 gamliela 在 loostr 的回答中提出的性能问题。DataTables rows().every() 文档
回答by user2310305
Set the default classes before.
之前设置默认类。
$.fn.dataTableExt.oStdClasses.sStripeOdd = '';
$.fn.dataTableExt.oStdClasses.sStripeEven = '';
For further references see here http://www.datatables.net/styling/custom_classes
如需进一步参考，请参见此处 http://www.datatables.net/styling/custom_classes
