DataTables with ColumnControl (searchList) increases load time from 2.5s to 15s with ~4000 Ajax-load
DataTables with ColumnControl (searchList) increases load time from 2.5s to 15s with ~4000 Ajax-load
pauloboc
Posts: 4Questions: 0Answers: 0
Hello,
When loading a table with about 4000 rows and 10 columns via Ajax, I noticed a significant increase in loading time when using ColumnControl (searchList).
- Without ColumnControl (searchList): ~2.5 seconds
- With ColumnControl (searchList): ~15 seconds
It seems that the reason is that all the select lists (searchList) are loaded and processed during the initial render.
Suggestion:
Would it be possible to load the lists only when the respective select is triggered (lazy load)?
This could significantly reduce the initial load time, especially for large tables.
Steps to reproduce:
Create a DataTable with Ajax loading ~4000 rows and ~10 columns (uniques values).
Compare loading times without and with ColumnControl (searchList).
Notice the significant time difference.
Expected behavior:
The initial load time should not be so heavily impacted by using searchList, ideally loading the options only on demand.
Replies
What version of ColumnControl are you using? The initial releases had performance issues in this regard, but it should be faster now. How many unique entries do you have? Can you link to a test case so I can profile it please?
Allan
Hi Allan — thanks for the quick reply!
Versions
DataTables: 2.3.2
ColumnControl: 1.0.7
Other extensions in bundle: JSZip 3.10.1, pdfmake 0.2.7, AutoFill 2.7.0, Buttons 3.2.4 (+ HTML5/Print), ColReorder 2.1.1, Responsive 3.0.5, Scroller 2.4.3, Select 3.0.1, StateRestore 1.4.1
Bundle I used: https://datatables.net/download/#dt/jszip-3.10.1/pdfmake-0.2.7/dt-2.3.2/af-2.7.0/b-3.2.4/b-html5-3.2.4/b-print-3.2.4/cr-2.1.1/cc-1.0.7/r-3.0.5/sc-2.4.3/sl-3.0.1/sr-1.4.1
Dataset
~4,000 rows × 10 columns (several columns have high cardinality).
Test case
I can’t share production, so I put a reduced repro here (loads 4k rows via Ajax and enables searchList on all columns):
https://drive.google.com/file/d/1k7osq3mQqQCxX4xelCuHTLx22-4-gH_M/view?usp=sharing
Allan, as requested, here are two example links for easier profiling:
Without ColumnControl:
https://scsemijoias.com.br/table_without_columnControl.html
With ColumnControl (searchList) — noticeably slower:
https://scsemijoias.com.br/table_columnControl_searchList.html
Many thanks for the link! I've committed a change that will help to address this - I've got your JSON data loading on my computer down from about 1 minute to 3 seconds with the change.
If you'd like to give it a go, remove the
cc-1.0.7/from your JS CDN link and add the nightly as ascripttag.Hopefully that will help some!
I would note that I'm not convinced that using
-content searchListon columns with unique data is all that useful. For example on theidcolumn - there are 4000 unique buttons being generated. For such columns a plain text search (-content searchText) would be better and help improve performance significantly (there are a few columns in the example like that).Allan
I ran the test and it worked really well!
I completely agree with you about the 4000 IDs — it’s just a test to evaluate the behavior.
Thanks for all your help!
Awesome - glad to hear that helped. Thanks for checking it out
Allan
Good observation the slowdown makes sense since searchList builds all dropdowns at once during render, which is heavy with thousands of rows/unique values; a lazy-load approach (loading options only when the user clicks the filter) would definitely help performance, and until that’s implemented a workaround could be limiting the number of unique values passed to each list or pre-filtering on the server side to cut down the payload; you might also check the current build with all extensions here: https://datatables.net/download/#dt/jszip-3.10.1/pdfmake-0.2.7/dt-2.3.2/af-2.7.0/b-3.2.4/b-html5-3.2.4/b-print-3.2.4/cr-2.1.1/cc-1.0.7/r-3.0.5/sc-2.4.3/sl-3.0.1/sr-1.4.1Visit
to see how the full setup performs and identify bottlenecks.