如何根据jQuery数据表中的列值为表行设置颜色
我正在使用jQuery datatables.I有如下数据
Column1 Column2 Column3 ----------------------- AAA BBB CCC AAA GGG YYY BBB ooo LLL
现在在前1行的第1列中,我有相同的值AAA
。我想对这些行应用一些颜色。然后是第三行的另一种颜色。就像我有30条记录。是否可以这样做。如果可能,我怎么能这样做。我正在使用jQuery数据表。谢谢提前..
使用fnRowCallback (或更新的rowCallback )来实现此目的
$('#example').dataTable({ "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) { switch(aData[0]){ case 'AAAA': $(nRow).css('color', 'red') break; case 'BBBB': $(nRow).css('color', 'green') break; case 'CCCC': $(nRow).css('color', 'blue') break; } } });
演示: 小提琴
API最近发生了变化,你现在应该使用aData [‘Column1’]而不是aData [0]
在v 1.10中添加了createdRowfunction
当创建TR元素(并且已插入所有TD子元素)时执行此回调,或者如果使用DOM源则注册,允许操纵TR元素。
这在使用延迟呈现(deferRender)或服务器端处理(serverSide)时特别有用,因此您可以在创建行时添加事件,类名信息或以其他方式格式化行。
https://datatables.net/reference/option/createdRow
例:
$('#example').dataTable({ // ... "createdRow": function( row, data, dataIndex ) { if ( data["column_index"] == "column_value" ) { $( row ).css( "background-color", "Orange" ); $( row ).addClass( "warning" ); } }, // ... });