Misunderstanding how row().data() relates to drawing the table

lee551

I'm having trouble understanding how row().data() is supposed to behave around re-drawing the table's contents.

According to everything on the doc page - https://datatables.net/reference/api/row().data() - it indicates that you must call table.draw() before the new data is drawn.

This is done to allow easy optimisation of the table where successive updates can be applied before the table is redrawn.

This is exactly the situation I'm concerned with -- the table I'm working on may potentially receive many updates in quick succession so I want to batch-draw the table at certain intervals to avoid thrashing. However, while working on a different table behavior I noticed that the table data seemed to be re-drawn every time row().data() is called, regardless of calling draw().

Here is a JSFiddle using one of the examples from the doc page: https://jsfiddle.net/rzuoja0f/ When a row is clicked, it should increment the value in the third column.

The example code advises:

    table
        .row( this )
        .data( d )
        .draw();

In the fiddle, I have commented out the call to draw(), yet the table's data still updates. I also put in an event handler for the draw.dt event, and it is not fired after the row().data() call.

So, am I misunderstanding what is meant by "draw" in the docs? I was assuming that a "draw" meant literally updating the displayed data in the table, and that row().data() explicitly did not trigger a re-draw, and the new data would not be shown until you explicitly called draw().

If this is expected behavior, how can I control when the table's display updates while doing multiple async row-level data updates?

allan

it indicates that you must call table.draw() before the new data is drawn.

Sort of. It will write to the innerHTML of the cells as the data is entered, but any sorting and filtering will not be updated until the draw() method is called.

I think I need to clarify the docs on this point - sorry! The cell().data() method is the same. Basically it will write to the cell and invalidate the cache, but the new cached data won't be acted upon.

In terms of performance this shouldn't be an issue when updating multiple rows, unless you need to read from the DOM for each row that is being updated - in which case it will really hurt performance since the browser could reflow the page each time.

Allan

lee551

Thanks for the answer, Allan. I agree that it would be helpful to elaborate on this point a bit in the docs since it's nuanced.

I also admit that performance only partially motivated my interest in this behavior. I was hoping that I could implement an easy "pause updates" feature by just stopping calls to table.draw() while still doing row-level updates. I understand I won't be getting away with it that easy and will work around it in app-level logic.

Thanks again for the clarification.