How to avoid several redraws when adding+removing rows by ja code?

Karlo

Hello!

After some time then the data rows are already loaded and visible, I sometimes have to amend the data by JS code. This may include adding a few rows and also removing some rows, sometimes in one method call.

Essentially what I'm doing is:

// add some rows
for (var _i = 0; _i < entiriesToAdd.length; _i++) {
  this.myGridInstance.row.add(entiriesToAdd[_i]);
}
// remove some rows
for (var _i2 = 0; _i2 < idsToRemove.length; _i2++) {
  var s = "#MY_ID_PREFIX_" + idsToRemove[_i2];
  this.myGridInstance.row(s).remove();
}
// finally redraw
this.myGridInstance.draw("full-hold");

This generally works, but the problem is that I see DataTables is doing intermediate redraws, which makes the bowser view blinking ugly and waste time. I was expecting that only one redraw is triggered (by the last code line)?

colin

Hi @Karlo ,

As show in this example, row.remove() and row().add() won't cause any redraws - you need to manually do the redraw yourself.

If you're seeing flickering, it may be because you've got other event handlers being called. To minimise the flickering, you could try calling rows().remove() and rows.add() to remove and add in bulk, rather than individually. But if you want to remove the flickering entirely, please could you link to your page or a test case, or modify my test case to demonstrate the issue.

Cheers,

Colin

Karlo

@colin

I identified a problem in handling the data on my side, so this seems to be no issue in DataTables.

Thank you very much!
Karlo