Speed issue when using inline editing with checkboxes
Speed issue when using inline editing with checkboxes
cj1005
Posts: 142Questions: 45Answers: 1
in DataTables
Hi,
I've noticed that when using inline editing with checkboxes the speed of the page load and any CRUD actions are taking considerably longer than without inline editing.
Below are two test cases, these are identical except the first URL is using inline editing for all of the checkboxes.
Test URL 1: https://wd4g.com/WCGateway/DTTest.wc
Test URL 2: https://wd4g.com/WCGateway/DTTest2.wc
They both use the same Ajax source for init and CRUD actions, so I suspect it is something to do with the rendering of the checkboxes, but I'm struggling to find the cause of this, could someone please take a look?
A quick test to see the speed difference is to hit the reload table data button
Thanks, Chris
Answers
Hi Chris,
I think this is really just a good example of how slow it is to access and manipulate the DOM! If you were to comment out the lines in your
rowCallback, I suspect you'd notice a really large speed increase.Perhaps one option is to not use the live
<input type="checkbox">elements. Instead just render an icon (like you do in the second example) based on the value in each cell, and then on click trigger inline editing to toggle and submit its value. You'll be cutting out a huge amount of DOM manipulation that way.Another option, if you want to keep the live DOM inputs, is to enable paging rather than using scrolling for the table. That will reduce the number of input elements that need to be processed at any one time.
Allan
Thank you, Allan, I will look into your first suggestion.