如何根据jQuery数据表中的列值设置表行的颜色

Question

我正在使用jQuery datatables.I有如下数据

Column1 Column2 Column3
-----------------------
 AAA    BBB     CCC
 AAA    GGG     YYY
 BBB    ooo     LLL

现在在前1行的第1列中，我有相同的值AAA。我想对它们应用一些颜色  rows.And然后另一种颜色为第三行。就像我有30条记录。是否有可能这样做。如果可能的话我怎么做。我正在使用jQuery数据表。谢谢提前..

Answer 1

使用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;
        }
    }
});

演示：Fiddle

Answer 2

API最近发生了变化，您现在应该使用aData ['Column1']而不是aData [0]

Answer 3

在v 1.10

中添加了

createdRow功能

  

当创建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" );
            }
        },
        // ...
    });