Setting background on row.data change

edika

I need to set the background of the cell depending by the value of the associated data.
in my tbale I've set the 'createdCell' event:

            {
                "targets": 5,
                "createdCell": function (td, cellData, rowData, row, col) {
                    if (tipoRecord === 'Ricevuti' && rowData.Gestore !== '') {
                        $(td).css('background-color', rowData.GestoreColor);
                    }
                }
            }

When I update the value of the cell with row.data(newdata), other values of the row are changed correctly, but the 'createdCell' event is not called, so the Background doesn't change.
How can I set the background on data update?

kthorngren

The columns.createdCell docs state:

This is a callback function that is executed whenever a cell is created (Ajax source, etc) or read from a DOM source.

Meaning it will only execute once when the cell is created. If your data changes then you will need to use rowCallback which will update each table draw.

Kevin

colin

Yep, createdCell is only called when created. You could use either drawCallback or rowCallback,

Colin

edika

I've put this code in datatables init function:

            "rowCallback": function (row, rowData) {
                if (tipoRecord === 'Ricevuti' && rowData.Gestore !== '') {
                    $('td:eq(5)', row).css('background-color', rowData.GestoreColor);
                }
            },

but it's called only on datatable initialization. When data is updated is not called.
What's wrong?

kthorngren

Did you verify that its not called by placing a console.log statement in the rowCallback function?

When data is updated is not called.

How are you updating the data? Are you using draw()?

Kevin

edika

Yes I've test it with a console.log and is never called. This is the code that update the row.data:

                    dataTable.rows().every(function () {
                        var d = this.data();
                        if (d !== undefined) {
                            var result = res.data.find(obj => { return obj.IdMessaggio === d.IdMessaggio; });
                            if (result !== undefined) {
                                if (d.Letto !== result.Letto || d.IdGestore !== result.IdGestore || d.HasRisposte!==result.HasRisposte) {
                                    this.data(result);
                                    initCheckBoxes();
                                }
                            }
                        }
                    });

kthorngren

rowCallback runs after each table draw. Use draw() after your dataTable.rows().every(function () function to redraw the table. Simply updating the row data won't cause rowCallback to run.

Keep in mind when using draw() Datatables will update the display based on current sorting and searching which may not be what you want. If thats the case then you can do something similar in the dataTable.rows().every(function () function to set the row background.

Kevin

edika

Is there a way to redraw only the row with updated data?
In my case the changing of data affect more the aspect then the displayed data, so I need to change in some cases the background in other cases the font. I've defined these styles in 'createdCell' and 'column.render' of datatables init function, and should be logical that these method are recall when data row is updated.

kthorngren

The rowCallback docs state this:

This callback allows you to 'post process' each row after it have been generated for each table draw, but before it is rendered into the document

In order for the "table draw" to occur you need to search, sort or call draw(). The draw() does more than just update the table display it also invokes sorting and searching. There is no method just to redraw just one row.

defined these styles in createdCell and column.render of datables init function

columns.render isn't meant for updating the DOM but for updating the data display. columns.createdCell only runs the first time a cell is displayed and is meant for static data.

If you don't want to use draw() you can use row().node() to get the tr of the row and update the background or whatever. Something like this example:
http://live.datatables.net/vuterofo/2/edit

But if you do use draw() make sure you only execute it once by placing it outside your rows().every() function.

Kevin