change the row color based on column data

change the row color based on column data

che_jayche_jay Posts: 8Questions: 3Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • Tom (DataTables)Tom (DataTables) Posts: 139Questions: 0Answers: 26
    edited August 2016

    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_jayche_jay Posts: 8Questions: 3Answers: 0

    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_jayche_jay Posts: 8Questions: 3Answers: 0

    $('#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)Tom (DataTables) Posts: 139Questions: 0Answers: 26

    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_jayche_jay Posts: 8Questions: 3Answers: 0

    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)Tom (DataTables) Posts: 139Questions: 0Answers: 26
    edited August 2016 Answer ✓

    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_jayche_jay Posts: 8Questions: 3Answers: 0

    thank you so much :)

This discussion has been closed.