Table's functions become laggy when displaying large number of rows using "All"
Table's functions become laggy when displaying large number of rows using "All"
BreenL
Posts: 3Questions: 2Answers: 0
Hello.
I'm working with large number of rows - ~5000. In real case I'm using server-side processing, to display only 10/50/100/All rows, but selecting "All" option in page's length select element makes page and table laggy.
Main problems when "All" selected:
1. In code I'm binding horizontal dragging to table element, so you can scroll horizontally by dragging table's rows, it works fine with page's length of 10 or 50, but if you select "All" drag-scroll becomes laggy. Also, if you try to scroll horizontally by laptop's touchpad or pressing middle mouse button, table's rows scroll fine, but header scrolls with delay and with some lag.
2. If you scroll down table, fixed header appears with delay and if you scroll back to the top of the page fast enough, fixed header remains its sticky position outside table element for a couple seconds, then disappears, it acts with delay.
3. If you select checkbox in the first row's cell, row becomes selected. I also added the "select all rows" checkbox in header's first cell. When displaying "All", selecting rows by these checkboxes takes more time (1-2 seconds approximately).
4. Row's hover effect is lagging too, rows become highlighted with delay.
I tried disabling scroll-x and fixed header options in my table, page became less laggy, but these two options are necessary.
Is there a way to fix these four problems?
link to example: https://live.datatables.net/xusekume/1/edit
Answers
If you are using server-side processing you should almost never have an "All" option. It would mean any benefit you get from server-side processing's loading parts of the data would be nullified. You'd be better just loading the data up front. With only 5000 rows that should be okay.
That said, displaying that many nodes for "All" will indeed slow performance down and it will depend greatly upon the client computer. For example I'm not noticing any issues with delay in the row hover effect when all are shown.
Yup - I think that is simply an artefact of changing the DOM for so many nodes at once. I don't immediately see how performance could be improved there.
Allan