jQuery DataTables performance with individual column select filters and large number of rows

Question

I currently have a client-sourced table with individual column select drop-downs that work amazing. I have about 1000 rows and the performance is great. Amazing jQuery plug-in. Problem: my client just told me that this could grow to upwards of 40000 in a month. My client also told me that they really like the individual select filters in the footers and I can't remove them. Hence, I am worried about performance. See here if you don't know what I'm talking about when I say individual select filters:

https://datatables.net/examples/api/multi_filter_select.html

I was poking around and I saw the example here using client side and deferred rendering:

https://datatables.net/extensions/scroller/examples/initialisation/large_js_source.html

But the issue is I don't believe I can use deferred rendering since the client wants the individual column select filters. I have to load up all the data for the select filters to even work...

Does anyone have any idea how I can accomplish this behavior of individual column filtering with good speed at high number of rows or suggest a reasonable alternative? I feel like I am reaching the limitations of the software/browser here...

Thanks!

Julian

Answer 1

40000 rows of data is a lot, just to be transferred from server to browser. It will slow down page load.

I would execute filter on server side, and output only first (say 1000) rows, so they can be more manageable for the browser, and saves a lot of bandwidth. But that also means more JavaScript and SQL coding.