How to change row color in JQuery Datatable

54
April 26, 2018, at 5:28 PM

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" );
            }
        },
        // ...
    });
READ ALSO
Paypal Express Checkout error 400 - payment.Button javascript

Paypal Express Checkout error 400 - payment.Button javascript

I'm trying to pay with paypal using Express checkout button, for a few days it worked just as expected but not until latelyIt just keeps on returning error 400 (Bad Request) with this response:

55
Updating an array for jQuery fade in and fade out with setInterval

Updating an array for jQuery fade in and fade out with setInterval

I am trying to create a fade in/out effect with a array elements that change with timeThe array will be updated by a function that fetches the array items from a external source on an hourly basis

34
Randomize Hex Color Avoiding Light colors

Randomize Hex Color Avoiding Light colors

Is there a simple way to randomize hex color but avoiding very light colors? For example white, very light yellows,greens,blues,etc

40
JQuery Validate - Dynamic Form Field Messages

JQuery Validate - Dynamic Form Field Messages

I am using JQuery Validate to do validation on my forms

52