When dynamically adding data using row.add the page freezes and takes a long time to load

ztgadmin

I have a JSON object (NOTE: Object contais more elements than I want to display on the table) that has about 300 entries. So, I loop thru each entry and use row.add to insert an entry. However, what happens is nothing returns to the screen until the loop is finished and all 300 entries have been added. I was expecting that the row.add would add 1 row for each iteration of the loop and not wait until the loop was finished.

kthorngren

Are you using the draw() method when adding a row?

https://datatables.net/reference/api/draw()

Kevin

IsaacBen

Not sure how you're adding, but this is how I do it. Share your code so we can see it.

table.row.add({id: data.id, type: data.type, brand: data.brand, price: data.price, description: data.description}).draw(false);

In your case just specify your data. Make sure that the data fits to what the table shows and add the idSrc as well in case you need it.

allan

You do indeed need to call draw() whenever you want a new row to appear on screen. However, you would rarely want to do that inside a loop - you'd be drawing the table 300 times instead of just once which has obvious performance issues.

Allan

ztgadmin

Adding while in the loop was the issue.