Version 1.10.4: table.row(0).data(values) cause unwanted table redraw

forusim

Hello,
trying the new version and encountered as problem with data update.
I have a simple table with 1 row.

var table, rowData;
table = $("#Summary.dataTable").DataTable();                      
rowData = {
    "dynamic": {
        "time": new XDate().toString("HH:mm"),
        "text": "Test ausgefallen"
    }
};
table.row(0).data(rowData);
table.draw();

When trying to set the data, the table gets already updated, before the .draw() gets called.
I debugged deep into the Highcharts.js and found the place, where it is screwed up.

Line 1466:

function _fnInvalidate( settings, rowIdx, src, colIdx ) {
...
var cellWrite = function ( cell, col ) {
            // This is very frustrating, but in IE if you just write directly
            // to innerHTML, and elements that are overwritten are GC'ed,
            // even if there is a reference to them elsewhere
            while ( cell.childNodes.length ) {
                cell.removeChild( cell.firstChild );
            }
    
            cell.innerHTML = _fnGetCellData( settings, rowIdx, col, 'display' );
        };
...
};

When the cellWrite sets the innerHTML, my browser Chrome 39 is already drawing the new cell.
With this approach updating big data, will cause serious performance issue, since browser will redraw at each cell update.

Any idea how to solve it?
Thank you!

forusim

Please check the live demo:
http://live.datatables.net/yivayufa/1/edit

allan

This is in part intentional - calling the row().data() method will update the cells in the row - but DataTables will not update the sorting / filtering - as the documentation notes:

Note that when used as a setter, this method sets the data to apply to the table, but does not update the table's internal caches of data until the draw() method is called.

One option to address this would be to modify the data source object and then call row().invalidate(). For example:

var data = table.row( x ).data();
data.myValue = 'new value';

table.row( x ).invalidate('data');

That will force DataTables to update the HTML only when invalidated. You could group the HTML update that way.

Allan

forusim

Thank you allan, your hint was valuable.
Although I wish, it would be more comfortable to dynamically update the data and define the draw and HTML-insert event.
Maybe someone need my implementation:
http://live.datatables.net/yivayufa/2/edit

allan

A plug-in API method could be used to basically disguise the operation I suggested behind a simple method call.

Good to hear that worked for you! Interesting use case :-)

Allan