Editor: Render, CSS Issue

kmbonin · October 2016

Trying to change the background color of a cell to the color I have in the database for a specific status. The issue is that it's working for the first row only, and all subsequent rows do not apply the color for it's row/cell.

Here's the column in my columns[] definition:

{
                "data": "logan_jobs.jobNumber", "className": "nowrap",             
                "render": function (data, type, full, meta) {
                    var color = full.logan_status.displayColor;
                    $("td:eq(1)").css('background', color);
                    return data;
                }
            }

Note this definition is for the second column. In row one, the background of the second column changes appropriately to green, the status/status color of that jobNumber. In all subsequent rows, the color for column two does not change and is not being applied, according to the element inspector.

What am I missing?

allan · October 2016

You can't use jQuery / DOM methods in the columns.render method I'm afraid. The DOM is not guaranteed to be available for that cell when the method is called. The one to use is rowCallback. Make sure you also scope the jQuery selector to that specific row - e.g. $('td:eq(1)', tr ) where tr is the row node passed into the rowCallback function.

Allan

kmbonin · October 2016

Totally worked. Thanks!!
Solution:

rowCallback: function (row, data, index) {
                var color = data.logan_status.displayColor;
                $('td:eq(1)', row).css('background', color);            
        },

Editor: Render, CSS Issue

Editor: Render, CSS Issue

Answers

Howdy, Stranger!

Categories

DataTables

Editor: Render, CSS Issue

Editor: Render, CSS Issue

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables