Java Curious ღ
Java Curious ღ

Reputation: 3692

JQuery datatable column data update works too slow

Working on generating table using datatable. I have textbox below the table, when I add any value to that textbox then that value should be updated to specific column of 1st row then each row should be increment by 1 for that column(new updated value).

I have code for that, that works fine for me. But it takes too much time for that. I have 159 records in table and when I update column then it takes about to 8-9 seconds, this is very long duration. Till execution complete I am not able to do anything.

JS code:

updateNo: function(dataTableId, noColIndex, numToAdd) {
    var dataTable = $(dataTableId).dataTable();
    var numberOfRows = dataTable.api().rows().data().length;
    var index;
    for (index = 0; index < numberOfRows; index++) {
        var cell = dataTable.api().cell(index, noColIndex);
        var currentNo = cell.data();
        var newNo = parseInt(currentNo) + numToAdd;
        cell.data(newNo).draw();
    }
}

I have tried to calculate method execution time and found that last line of method: cell.data(newNo).draw(); takes more time to execute.

I am not so much proficient in JavaScript or Jquery so I don't know the reason. If someone knows the reason and fix for this issue then please let me know.

I want to decrease execution time for this.

Upvotes: 0

Views: 857

Answers (1)

buffy
buffy

Reputation: 546

You don't have to redraw every cell, just redraw the entire table once after executing your code

Upvotes: 3

Related Questions