Loading/Displaying large amount of data on webpage.

Question

I have a webpage which contains a table for displaying a large amount of data (on average from 2,000 to 10,000 rows). This page takes a long time to load/render. Which is understandable.

The problem is, while the page is loading the PCs memory usage skyrockets (500mb on my test system is in use by iexplorer) and the whole PC grinds to a halt until it has finished, which can take a minute or two. IE hangs until it is complete, switching to another running program is the same.

I need to fix this - and ideally i want to accomplish 2 things:

1) Load individual parts of the page seperately. So the page can render initially without the large data table. A loading div will be placed there until it is ready.

2) Dont use up so much memory or local resources while rendering - so at least they can use a different tab/application at the same time.

How would I go about doing both or either of these?

I'm an applications programmer by trade so i am still a little fizzy on the things I can do in a web environment.

Cheers all.

Answer 1

Two basic options:

• Pagination
• Lazy loading (load as user scrolls down). See this jQuery plugin

Answer 2

You could try a couple of things:

Loading data Asynchronously and Paging

Answer 3

Regarding the first part, it's called Ajax: display the page without the table, or with an empty table, and then use ajax requests to fetch the data (in html or any data format) and display it.

Regarding the second part, you want something called lazyloading: the possibility to load data only when the user needs it, ie when it's on the visible part of the document. You can look at this question for a DataGrid library capable of handling millions of rows.