Как изменить цвет строки в JQuery DataTable на основе значения

Question

Я использую DataTable в javascript и jquery для настройки интерактивной таблицы.Я хочу изменить цвет строки на основе значения ячейки.

Я пытался использовать функцию fnRowCallback , и я пытался использовать функцию rowCallback .

обе функции не работают, и на странице не отображается таблица.

если я удаляю эти функции, отображается таблица и все данные доступны.

 $(function(){

        var destsData=[
        ]
        var sections={}
        var theTable = $('#SearchT2chiraTable').DataTable({
            language: {
                search: 'ﺑﺤﺚ : ',
                lengthMenu:'ﻣﺸﺎﻫﺪﺓ _MENU_ ﺑﻴﺎﻧﺎﺕ',
                paginate: {
                    first:      "اﻻﻭﻝ",
                    previous:   "اﻟﺴﺎﺑﻖ",
                    next:       "اﻟﺘﺎﻟﻲ",
                    last:       "اﻻﺧﻴﺮ"
                }
            },
            select: 'single'
        })
        var destsTable = $('#DestsTable').DataTable({    
            "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
                if ( aData[2] == "DEFAULT VALUE" )
                {
                    $('td', nRow).css('background-color', 'red' );
                }
                else
                {
                    $('td', nRow).css('background-color', 'white');
                }

            language: {
                search: 'ﺑﺤﺚ : ',
                lengthMenu:'ﻣﺸﺎﻫﺪﺓ _MENU_ ﺑﻴﺎﻧﺎﺕ',
                paginate: {
                    first:      "اﻻﻭﻝ",
                    previous:   "اﻟﺴﺎﺑﻖ",
                    next:       "اﻟﺘﺎﻟﻲ",
                    last:       "اﻻﺧﻴﺮ"
                }
            },

            select: 'single',
            data: destsData,
            columns: [
                { "data": "destination_id","title":'اﻟﺮﻣﺰ' },
                { "data": "te2chira_id_id","title":'ﺭﻣﺰ اﻟﺘﺄﺷﻴﺮﺓ' },
                { "data": "opinion", "title": 'اﻻﻗﺘﺮاﺡ' },
                { "data": "destination_date","title":'اﻟﺘﺎﺭﻳﺦ' },

                { "data": "section","title":'اﻟﻘﻄﻌﺔ' ,

                        "render":function(val,type,row,meta){
                            console.log('the Value is ',val)
                            if (type == 'set'){
                                console.log('doing here ')
                                row.section = val
                                row.section_display=sections[row.section]
                                row.section_filter=sections[row.section]
                                return
                            }else if (type === 'display',val) {
                                console.log('display')
                                return sections[val];
                            }
                            else if (type === 'filter') {
                                console.log('filter',val)
                                return row.section_filter;
                            }
                            // 'sort', 'type' and undefined all just use the integer
                            return row.section;
                        }
                    }


             ]
           }
        });

или вторая функция.

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

                if ( data.opinion == "DEFAULT VALUE" )
                {
                    $('td', row).css('background-color', 'Red');
                }
                else
                {
                    $('td', row).css('background-color', 'white');
                }

            }
           }

Я рассчитываю отобразить данные в destTable , где мнение имеет значение, равное ЗНАЧЕНИЕ ПО УМОЛЧАНИЮ , чтобы сделать цвет строки красным, иначеоставь это белым.

Answer 1

fnRowCallback похоже на правильный способ сделать это, но я замечаю, что вам не хватает закрывающей фигурной скобки и запятой - что приведет к разрыву кода и невозможности отображения таблицы.

"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
    if ( aData[2] == "DEFAULT VALUE" )
    {
        $('td', nRow).css('background-color', 'red' );
    }
    else
    {
        $('td', nRow).css('background-color', 'white');
    }
},  // Make sure you add the closing brace and a comma
language: {
...

Answer 2

Вы можете это по-другому

{% for q in queryset %}

   {% if q.id == 1 %}
     <tr style="background: #fff;>
   {% else %}
     <tr style="background: #000;>
   {% endif %}
        <td></td>
    </tr>
{% endfor %}