javascript - How to handle huge table? - Stack Overflow

admin管理员组

文章数量:1339470

I would like to display to user a table which contains ~500,000 rows. The table should be calculated based on a file (i.e. the table is known at the beginning, and does not change). I guess that building the HTML text of this table is not a good idea in terms of memory performance. So how can I build such table ?

I would like user to be able to scroll the table using a vertical scroll bar. Is it possible to build on the fly only the visible part of the table ? I'm afraid to see delays because of this.

Is it a better idea to use server side programming rather than Javascript ?

I'm not restricted to any server side programming language, so any advise would be appreciated !

I would like to display to user a table which contains ~500,000 rows. The table should be calculated based on a file (i.e. the table is known at the beginning, and does not change). I guess that building the HTML text of this table is not a good idea in terms of memory performance. So how can I build such table ?

I would like user to be able to scroll the table using a vertical scroll bar. Is it possible to build on the fly only the visible part of the table ? I'm afraid to see delays because of this.

Is it a better idea to use server side programming rather than Javascript ?

I'm not restricted to any server side programming language, so any advise would be appreciated !

• javascript
• html

Share Improve this question Follow edited Apr 26, 2010 at 14:34 Misha Moroshko asked Apr 26, 2010 at 13:53 Misha MoroshkoMisha Moroshko 172k230230 gold badges520520 silver badges760760 bronze badges 2

• A half-million rows doesn't sound very useable - usually when I have datasets this large I try and find ways to group and summarize the data (there is NO WAY I'm reading through 500,000 of data), usually I do that in Excel or some other app. How does the user find anything in your dataset? Could you send them a CSV file, or some sort of summary report? – FrustratedWithFormsDesigner Commented Apr 26, 2010 at 13:57
• 3 see this similar question for some good solutions - stackoverflow./questions/2402953/… – Anurag Commented Apr 26, 2010 at 17:06

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 7

Send the first 250-ish rows to the user, as he scrolls down, perhaps past row 200, fetch the next 250 rows, append to the table and so on.

This is a (ui) design pattern known as "Infinite scroll".

Displaying 500,000 rows all at once to a user is a bad idea. Consider other options:

• allow user to download file as CSV
• show paginated (still not very useful)
• provide filtering mechanisms (by date etc.) to allow the user to only see the data they need

If the users really needs to see all that data at once, then viewing it in the browser is one of the worst ways to do that - they should be using a tool made specifically for viewing data, like Tableau.

Classic example of where to use ajax.

Use javascript in bination with a server side script.

This really is a case for server-side pagination, I would say, maybe in bination with Ajax. A HTML table with 500.000 rows is going to crash a lot of browsers.

You're not specifying which server side technology you work with. If you update your question, I'm sure people will be able to give you some pointers.

Try this: Clusterize.js Tiny plugin to display large data sets easily https://clusterize.js/

Is it possible to build on the fly only the visible part of the table ?

If you build a "fake" scroll (e.g. jquery slider) you can retrieve parts of the table instead of the whole.

本文标签： javascriptHow to handle huge tableStack Overflow