Change Colour based on selected value | Change color based on value | Change Color field color

aungkohein

Hi guys!

If you want to change colour of the cell based on the value you have selected or being updated from another cell, you can use the snippet below:

File: js/tables.YourTableName.js

        //Status
        { "width": 50, "targets": 2 ,
            render: function (data, type, full, meta) {

                if (data == "Open") {
                return "<div class='text-wrap width-50 green-background'>" + data + "</div>";
                }else{
                    return "<div class='text-wrap width-50'>" + data + "</div>";
                }
            }

        },

-- end--

File: style.css

/Control for Data Fields Color Change/
.green-background {
background-color: green;
color: white;
}

-- end --

** It would help if someone could provide the code to change the entire row color also!

codegard1

One way you could change the entire row is to use the createdRow callback function, which is an option of the DataTables Initialisation:

// This function will be called after each row is generated but _before it is rendered_, which is the perfect time to apply style changes
var createdRowCallback = function (row, data, index) {
            // Set conditions for the row to change color
            if (data.status === 'bad') {
                console.log(data.Id + " is bad!");
                jQuery('td', row).css('color', 'red'); // sets text color for the entire row
            }
        };

// reference the function in the initialisation call
var table = jQuery('#MyDataTable').DataTable({
                    "columns": columns,
                    "data": data,
                    "createdRow": createdRowCallback,
                    etc.
                });