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

Question

我正在使用 jQuery 数据表。我的数据如下

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

现在在前 2 行的 column1 中我有相同的值AAA。我想对这些行应用一些颜色。然后第三行的另一种颜色。像这样我有 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;
        }
    }
});

演示：小提琴

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