How to improve the performance of the filter function for very large tables (lots of rows and text)?

kzhrvy

I have a table with over 700 rows. The filter function is extremely slow for this large table. How can the performance be improved for such large tables? The performance is not just poor because of the large number of rows. It is of course very bad when a column has a lot of text.

tangerine

You need to provide more information. What do you mean by "extremely slow" and "very large"? What does your data look like?

700 rows is not a "large number" to me.

allan

Could you try the nightly version which has some performance improvements in it.

However, we'd really need a test case so we can profile it and see what exactly is taking the time. As tangerine notes, 700 really isn't large and the search should be almost immediate if its on the client-side.

Allan

kzhrvy

Here are the JS and CSS files that are referenced:

<LINK href="jquery-ui.css" rel=stylesheet>
<LINK href="dataTables.jqueryui.css" rel=stylesheet>
<LINK href="jquery.dataTables.css" rel=stylesheet>

<SCRIPT src="jquery-latest.min.js" type=text/javascript></SCRIPT>
<SCRIPT src="jquery.tablesorter.js" type=text/javascript></SCRIPT>
<SCRIPT src="jquery-ui.min.js" type=text/javascript></SCRIPT>
<SCRIPT src="document-display.js" type=text/javascript></SCRIPT>
<SCRIPT src="jquery.dataTables.js" type=text/javascript></SCRIPT>
<SCRIPT src="jquery.highlight.js" type=text/javascript></SCRIPT>

allan

Thanks. However, we'd really need a complete working demo to be able to profile it.

For example, this demo has more than 700 rows in it and it is very responsive.

Allan

kzhrvy

I have attached a zip file with one HTML document containing a table with over 900 rows as well as the corresponding JS and CSS files that we use.
Extremely slow means that each time you type a letter you have to wait several seconds for filtering to stop. It is of course very slow with the first letter and then marginally improves with each added letter.
- thanks for your help!

tangerine

You have a number of issues with that.
For example, DataTables has its own sorting mechanism and you should not be including tablesorter.
Also, I can't see where you are connecting your table to a DataTables initialisation process.
Then there's the obvious point that reading data from the DOM will always be slower. Can you not access your data dynamically?

allan

Thanks for the file. If I open it in Chrome and type a 7 into the last column, it filters correctly and does so in a fraction of a second.

If you were to Ajax load the data, enable paging and enable the deferRender option, that would help improve performance.

Allan

kzhrvy

I have been using IE and when I test this table in Chrome the performance is better. However even in Chrome typing in "para" into column 4 is still a bit sluggish.

allan

Which version of IE? I only tried Chrome Mac, and in fairness I'm using an i7 processor, but it was virtually instant for me.

Allan

kzhrvy

IE 11

allan

Yup - its a bit slower in IE11. A noticable delay.

If you disable the search highlighting it is faster. If you enable paging it is much faster.

Allan

kzhrvy

OK, thanks!