Question

我正在使用DataTable插件来显示一些记录。我有3行，名称，日期，金额。我希望行的背景颜色根据金额列中的特定值进行更改。

这是我的代码：

<script type="text/javascript" charset="utf-8">
    $(document).ready( function () {
        var table = $('#tid_css').DataTable({
            'iDisplayLength': 100,
            "bFilter": false,
            "aaSorting" : [[2, "desc"]]
        });
    } );
</script>

作为测试，我在代码旁边添加了以下代码，但收到错误“ DataTables警告：table id = tid_css - 无法重新初始化DataTable ”

<script type="text/javascript" charset="utf-8">
$(document).ready( function() {
$('#tid_css').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
            if ( aData[2] == "1" )
            {
                $('td:eq(2)', nRow).html( '<b>1</b>' );
            }
        }
    } );
} );
</script>

使用“fnRowCallback”和不同的条件，如果金额为1，则颜色为红色，2 =蓝色，3 =蓝色等，这样做有多容易。

Answer 1

好的我能够自己解决这个问题：

$(document).ready( function () {
            $('#tid_css').DataTable({
                "iDisplayLength": 100,
                "bFilter": false,
                "aaSorting" : [[2, "desc"]],
                "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                    if ( aData[2] == "5" )
                    {
                        $('td', nRow).css('background-color', 'Red');
                    }
                    else if ( aData[2] == "4" )
                    {
                        $('td', nRow).css('background-color', 'Orange');
                    }
                }
            });
})

Answer 2

DataTables 1.10+以来的等效语法是rowCallback

"rowCallback": function( row, data, index ) {
    if ( data[2] == "5" )
    {
        $('td', row).css('background-color', 'Red');
    }
    else if ( data[2] == "4" )
    {
        $('td', row).css('background-color', 'Orange');
    }
}

之前的答案之一提及createdRow。在某些情况下，这可能会给出类似的结果，但它不一样。例如，如果在更新行数据后使用draw()，则createdRow将无法运行。它只运行一次。 rowCallback将再次投放。

Answer 3

自v 1.10以来，DataTables具有此功能

https://datatables.net/reference/option/createdRow

示例：

        $('#tid_css').DataTable({
            // ...
            "createdRow": function( row, data, dataIndex ) {
                if ( data["column_index"] == "column_value" ) {
                    $( row ).css( "background-color", "Orange" );
                    $( row ).addClass( "warning" );
                }
            },
            // ...
        });

Answer 4

由于数据表v1.10.18，您应该指定列键而不是索引，它应该像这样：

rowCallback: function(row, data, index){
            if(data["column_key"] == "ValueHere"){
                $('td', row).css('background-color', 'blue');
            }
        }

Answer 5

我使用createdRow函数解决了我的问题

    $('#result1').DataTable( {
        data: data['firstQuery'],
        columns: [
                        { title: 'Shipping Agent Code' },
                        { title: 'City' },
                        { title: 'Delivery Zone' },
                        { title: 'Total Slots Open ' },
                        { title: 'Slots Utilized' },
                        { title: 'Utilization %' },

                    ],
                    "columnDefs": [
                        {"className": "dt-center", "targets": "_all"}
                      ],
                      "createdRow": function( row, data, dataIndex){
                            if( data[5] >= 90  ){
                                $(row).css('background-color', '#F39B9B');
                            }
                            else if( data[5] <= 70  ){
                                $(row).css('background-color', '#A497E5');
                            }
                            else{
                                $(row).css('background-color', '#9EF395');
                            }

                        }
                } );

Answer 6

这是设法更改数据表行背景（DataTables 1.10.19）的方法

$('#memberList').DataTable({
    "processing": true,
    "serverSide": true,
    "pageLength":25,
    "ajax":{
        "dataType": "json",
        "type": "POST",
        "url": mainUrl+"/getMember",
       },
    "columns": [
        { "data": "id" },
        { "data": "name" },
        { "data": "email" },
        { "data": "phone" },
        { "data": "country_id" },
        { "data": "created_at" },
        { "data": "action" },
    ],
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
        switch(aData['country_id']){
            case 1:
                $('td', nRow).css('background-color', '#dacfcf')
                break;
        }
    }
});

您可以使用fnRowCallback方法功能来更改背景。

Answer 7

我使用rowCallBack datatable属性可以正常工作。 PFB：-

"rowCallback": function (row, data, index) {

                        if ((data[colmindx] == 'colm_value')) { 
                            $(row).addClass('OwnClassName');
                        }
                        else if ((data[colmindx] == 'colm_value')) {
                                $(row).addClass('OwnClassStyle');
                            }
                    }

Answer 8

为表主体创建TR元素时的回调。

$('#example').dataTable( {
      "createdRow": function( row, data, dataIndex ) {
        if ( data[4] == "A" ) {
          $(row).addClass( 'important' );
        }
      }
    } );

https://datatables.net/reference/option/createdRow

根据单元格值DataTable更改行背景颜色

8 个答案: