[英]DataTables: How to set classes to table row cells (but not to table header cells!)
我的桌子风格非常好。
{抱歉链接不再工作}
我不得不添加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>
桌头细胞......我不想要
我的问题的解决方案是:使用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
由于您只使用sClass将样式应用于表,因此解决问题的简单方法是将CSS本身修改为仅应用于td元素。
旧CSS风格:
.avo-light {
color: blue;
}
新的CSS风格:
td.avo-light {
color: blue;
}
这样,尽管sClass也应用于元素,但CSS只会影响您感兴趣应用样式的单元格。
我意识到这个问题有点陈旧,但我发现它比最佳解决方案更加模块化。
之前设置默认类。
$.fn.dataTableExt.oStdClasses.sStripeOdd = '';
$.fn.dataTableExt.oStdClasses.sStripeEven = '';
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()文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.