Datatables: изменение цвета ячеек на основе значений

Я использую DataTable для создания интерактивной таблицы. У меня 9 столбцов, 5 из которых являются значениями. Я хочу изменить цвет фона каждой ячейки на основе их конкретных.

Я начал сначала пытаться изменить весь цвет строки, поскольку это казалось более простой задачей. Однако я не могу ничего изменить.

Мой код ниже:

    <head>  
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>      

    <script>
        $(document).ready(function(){
            $('#countryTable').DataTable();
        });
    </script>

    <script>
        $(document).ready( function () {
        $('#countryTable ').DataTable({
            "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                if ( aData[3] > 11.7 )
                {
                    $(nRow).css('color', 'red')
                }
                else if ( aData[2] == "4" )
                {
                    $(nRow).css('color', 'green')
                }
            }
        });
    </script>

</head>

<body>      

    <table id ="countryTable" class="display" cellspacing="0" data-page-length='193'>
<thead>
    <tr>
        <th>Rank</th>
        <th>Country</th>
        <th>Code</th>
        <th>Total</th>
        <th>Beer</th>
        <th>Wine</th>
        <th>Spirits</th>
        <th>Other</th>
        <th>Score</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>Estonia</td>
        <td>EE</td>
        <td>14.97</td>
        <td>5.87</td>
        <td>1.65</td>
        <td>5.64</td>
        <td>1.81</td>
        <td>3 - Medium Risky</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Belarus</td>
        <td>BY</td>
        <td>14.44</td>
        <td>2.5</td>
        <td>0.75</td>
        <td>6.73</td>
        <td>4.46</td>
        <td>4 - Very Risky</td>
    </tr>

</tbody>

Я также попытался использовать следующую функцию, но не повезло. Если бы кто-нибудь мог помочь, это было бы очень appriciataed, поскольку я очень люблю java script.

$(document).ready( function () {
        $('#countryTable').DataTable({
            "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                if ( aData[3] == "5" )
                {
                    $('td', nRow).css('background-color', 'Red');
                }
                else if ( aData[3] == "4" )
                {
                    $('td', nRow).css('background-color', 'Orange');
                }
            }
        });

Ответы

Ответ 1

Прежде всего, инициализируйте DataTable только один раз. Затем, согласно вашему вопросу, используйте rowCallback, а не fnRowCallBack, как показано ниже:

var oTable = $('#countryTable').DataTable({ 
    'rowCallback': function(row, data, index){
    if(data[3]> 11.7){
        $(row).find('td:eq(3)').css('color', 'red');
    }
    if(data[2].toUpperCase() == 'EE'){
        $(row).find('td:eq(2)').css('color', 'blue');
    }
  }
});

Здесь fiddle

Ответ 2

Я хотел бы добавить, если я объявлю столбец:

columns: [
                {data: 'id', name: 'riskdetails.id' },
                {data: 'name', name: 'riskdetails.name'}
]

поэтому вместо числа я должен написать имя в разделе if:


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

                if (data['name'] == 'Michael') {

                    $(row).find('td:eq(7)').css('background-color', 'red').css('color', 'white');

                } else {

                    $(row).find('td:eq(7)').css('background-color', 'blue').css('color', 'white');

                }

            }