如何在JQuery Datatable中更改行颜色

Question

问题陈述：根据状态更改表格行的颜色：

  

如果状态为有效，则行颜色为绿色，如果无效，则行颜色为红色/黄色。

我尝试了很多方法，但我认为bootstrap表强制不改变行颜色。请指导我该怎么做？

数据：

[  
   "active",
   "inactive"
]

TABLE：

<table id="employee" class="table table-striped table-sm table-hover">
    <thead>
        <tr>
            <th>Status</th>
        </tr>
    </thead>
</table>

JQuery Datatable：

$('#employee').DataTable({

    "aaData": dataOrPathToData,
    "aoColumns": [

        {"mDataProp":"status", "render": function(data, type, row, meta) {

            if( type==='display' ) {
                data = '<a>' + data  + '</a>';
            }
            return data;
        }}
    ]

});

我正在尝试生成这样的输出：

感谢。

Answer 1

将课程添加到a代码

 if( type==='display' ) {
                data = '<a class='+data+'>' + data  + '</a>';
            }

在 css

中添加样式

tr a .active{
   background-color:green;
}
tr a .inactive{
   background-color:yellow;
}

Answer 2

您好@Badshah您可以像这样调用您的数据表。

$('#employee').dataTable({
    "rowCallback": function( row, data, index ) {
        if(index%2 == 0){
            $(row).removeClass('myodd myeven');
            $(row).addClass('myodd');
        }else{
            $(row).removeClass('myodd myeven');
             $(row).addClass('myeven');
        }
      }
});

你可以像这样定义你的css类：

table.dataTable tbody tr.myeven {
      background-color: #f2dede;
 }
table.dataTable tbody tr.myodd {
      background-color: #bce8f1;
 }

希望这会有所帮助。

Answer 3

$('#employee').DataTable({
        // ...
        "createdRow": function( row, data, dataIndex ) {
            if ( data["column_index"] == "column_value" ) {
                $( row ).css( "background-color", "green" );
                $( row ).addClass( "warning" );
            }
        },
        // ...
    });