Add multiple child rows and redrawing only when complete

ManiPS

I have 1000 records on the table.
Needs to add the childs on page load. When i add it, the page becomes unresponsive as there is more data.
I found out the root cause of the issue is,
When ever i call this child.show() it redraw the table internally which makes the process slow.

is there any way that need to add all childs at once and redraw the table once when iteration complete.

table.rows().every(function(){
// If row has details collapsed
if(!this.child.isShown()){
// Open this row
this.child(format(this.data())).show();
$(this.node()).addClass('shown');
}
});

Thanks in advance. Please help me out on the same.

kthorngren

Not sure where you have this function but you probably will just want to loop through only those rows being displayed. To do so you would use the rows() selector-modifier of {page:'current'}. Look at the page example.

Kevin

ManiPS

@kthorngren

I have parent child records. SO row() can not be used here

Example is here

https://jsfiddle.net/qLmkwguz/

kthorngren

Here is the updated fiddle with my suggestion:
https://jsfiddle.net/4q0t7wz3/

In you click events I changed the loop to look like this:
table.rows({page:'current'}).every(function(){

Of course this doesn't loop through all rows so when you go to the next page those child rows aren't shown. If this is a requirement then you will need to update your code to either show or hide the rows on each draw. To do this I would suggest setting a flag to control whether child rows or shown or hidden. Then in drawCallback loop through the rows using {page:'current'} and display or hide the child rows as desired.

Kevin

ManiPS

@kthorngren

We don't have pagination in my case.

kthorngren

Even with the page length set to display all 1164 rows it takes around 1 second to open or close all the rows. I realize your production data is different and more complex. What are you doing in the format function? Maybe that is the delay.

Kevin

ManiPS

@kthorngren
Hmm. Thanks for your reply. Will check.

Eventhrough,
is there any way that need to add all childs at once and redraw the table once when iteration complete?

kthorngren

You really aren't redrawing the table, at least not a Datatables redraw, when displaying the child rows. Someone else may have ideas but I don't know of a way to add all the clients at once since you need to loop through each row to open/close the client.

What do you have in your format function? Are you performing ajax requests in the function?

Kevin