DataTables - 设置行颜色

Posted 2023-05-09

【中文标题】DataTables - 设置行颜色

【英文标题】：DataTables - set row colour

【发布时间】：2021-08-27 23:50:09

【问题描述】：

我正在使用 DataTables，并希望根据输入为每一行设置背景颜色。我按照论坛中的指示进行操作：

https://datatables.net/forums/discussion/36595/change-the-row-color-based-on-column-data

[https://datatables.net/forums/discussion/62460/changeing-row-color-at-rendering-time-based-on-column-values]

但是，我无法让它工作。

我的代码是：

createdRow: function( row, data, dataIndex)
    //console.log('data[3]: ' + data[3]);
    if( data[3] ==  '4')
        $(row).css("background-color", "red");
    
,

console.log 显示“data[3] is undefined”。

我试过了：

if( data[3] ===  '4')

完整的上下文是：

//Show DataTable
    moment.updateLocale(moment.locale(),  invalidDate: "" )
    if ( $.fn.dataTable.isDataTable( '#ymTable' ) ) 
        var ymTable = $('#ymTable').DataTable();
    
    else 
        var ymTable = $('#ymTable').DataTable( 
            
            createdRow: function( row, data, dataIndex)
//              console.log('data[3]: ' + data[3]);
                if( data[3] ==  '4')
                    $(row).css("background-color", "red");
                
            ,

            info:     false,
            dom: 'Bfrtip',
            order: [[ 3, 'asc' ], [ 1, 'asc' ], [ 2, 'asc' ]],
//          buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
            
            buttons: [
                      
                          extend: 'copy',
                          exportOptions: 
                              columns: [ 1, 2, 3, 4, 5, 6 ]
                          
                      ,
                      
                          extend: 'csv',
                          exportOptions: 
                              columns: [ 1, 2, 3, 4, 5, 6 ]
                          
                      ,
                      
                          extend: 'excel',
                          exportOptions: 
                              columns: [ 1, 2, 3, 4, 5, 6 ]
                          
                      ,
                      
                          extend: 'pdf',
                          exportOptions: 
                              columns: [ 1, 2, 3, 4, 5, 6 ]
                          
                      ,
                      
                          extend: 'print',
                          exportOptions: 
                              columns: [ 1, 2, 3, 4, 5, 6 ]
                          
                      ,
                  ],
            columns: [
                  data: 'cdId',
                      visible: false,
                      searchable: false,
                  data: 'surname',
                      defaultContent: "",
                  data: 'firstname',
                      defaultContent: "",
                  data: 'age',
                      defaultContent: "",
                  data: 'gender',
                      defaultContent: "",
                  data: 'paradePatrol',
                      defaultContent: "",
                  data: 'role',
                      defaultContent: "",
                  data: null,
                      className: "center",
                      render: function(data,type,row) 
                           if(data.sayId == null || data.sayId == undefined)
                               return ("<input type='checkbox' id=" + data.cdId + " name='update' onchange='ymActivityPatrolFunction(this)' style='zoom: 2.0;'>")
                           else
                               return ("<input type='checkbox' id=" + data.cdId + " name='update' onchange='ymActivityPatrolFunction(" + data.cdId + ", " + this.checked + ")' style='zoom: 2.0;' checked>");
                           
                         ,
                  ,

                 ],
                 columnDefs: [
                     targets: 7, orderable: false,
                 ],
        );
    

【参考方案1】：

我发现答案是，替换：

data[3] ==  '4'

与：

data.age ==  '4'

如：

createdRow: function( row, data, dataIndex)
    if( data.age ==  '4')
        $(row).css("background-color", "red");
    
,