How to change row color in JQuery Datatable

Question

Problem Statement: change the color of the table row, with respect to status:

if status is active, row color is green , if inactive, row color is red/yellow.

I've tried many ways, but I think bootstrap table is forcing not to change the row color. Please guide me how do I do it?

Data:

[  
   "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;
        }}
    ]

});

I am trying to produce an output like this:

Thanks.

Answer 1

Add class to a tag

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

add style in css

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

Answer 2

Hi @Badshah You can call your datatable like this.

$('#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');
        }
      }
});

And you can define your css class like this:

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

Hope this helps.

Answer 3

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