change the row color based on column data

che_jay

Hi,
I developed a project using data tables.I develop a web application.It has a table.this table has 9 columns.i retrieve data from database using php.I want to change the row color according to cell data values.as a example
there are 2 columns such as procedure_name and description.
if procedure_name="backup" and description="enter backup" then color is red
how can I do this with.please help me

Tom (DataTables)

You can use createdRow in order to look at each row before it is added to the table and detect if the data is what you want, if it is then use some css in order to change the colour of the row and add that class to the row.

Example-

    $('#example').dataTable( {
                "createdRow": function( row, data, dataIndex){
                    if( data[2] ==  `someVal`){
                        $(row).addClass('redClass');
                    }
                }
            });

hope this helps.

Thanks

Tom

che_jay

thank you.
can you explain how get "row,data,dataIndex" value.I'm new to coding.so can't understand how it is working.

che_jay

$('#example').dataTable( {
"fnRowCallback": function( nRow, aData ) {
if (procedure_name ='".$countryPlmns['procedure_name']."') {
$nRow.css({"background-color":"red"})
}
});
I used this code.but this is not working

Tom (DataTables)

Apologies linked you to the wrong documentation it's supposed to be createdrow.

row is the row/node that is about to be created, data is the data source for the row and dataIndex is datatables index that is set automatically.

You don't have to set those values to anything but you can use them within the function. For example using data (which is either an array or an object) allows you to look at all the data you are about to add to the row.

You can do a check on that data to see if the data in any of the columns match the values you are looking for. If they do, then you can add a css class to row in order to change the colour if it.

Thanks

Tom

che_jay

I used this code

"createdRow": function( row, data, dataIndex){
if( data==Update GPRS Location){
$(row).addClass('redClass');
}
}
}
but it's not working.
I can't understand how get data from database and compare them with "data" value.In here how pass the value to "data" variable.please explain me.
thank you

Tom (DataTables)

Hi take a look at this example I've created, data comes from however you're adding data into the table.

http://live.datatables.net/tohehohe/1/edit

Thanks

Tom

che_jay

thank you so much