Изменить цвет фона Row на основе значения ячейки DataTable

Я использую плагин 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: таблица 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 = синий и т.д.

Ответы

Ответ 1

OK Я смог решить это сам:

$(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');
                    }
                }
            });
})

Ответ 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 снова запустится.

Ответ 3

DataTables имеет функциональность для этого, поскольку v 1.10

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