如何根据值更改jquery dataTable中的行颜色

Posted 2023-05-09

【中文标题】如何根据值更改jquery dataTable中的行颜色

【英文标题】：how to change the row color in jquery dataTable based on the value

【发布时间】：2019-05-29 20:33:27

【问题描述】：

我在 javascript 和 jquery 中使用 DataTable 来设置交互式表格。我想根据单元格值更改行颜色。

我尝试使用 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 中显示数据，并且意见的值等于 DEFAULT VALUE 以使行颜色变为红色以使其保持白色。

【参考方案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: 
...

【讨论】：

这是错误谢谢。但我需要指定字段名称和字段索引。

【参考方案2】：

你可以用另一种方式做到这一点

% for q in queryset %

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

【讨论】：

我尝试了你的答案，我将它添加到 javascript 代码上方的创建表中，但它不起作用。代码：<table id="DestsTable" class="searchte2chira" > % for row in tableItems % % if row.opinion == "DEFAULT VALUE" % <tr style="background: #fff;> % else % <tr style="background: #000;> % endif % <td></td> </tr> % endfor % </table>