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 plete, switching to another running program is the same.

I need to fix this - and ideally i want to acplish 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.

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 plete, switching to another running program is the same.

I need to fix this - and ideally i want to acplish 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.

• javascript
• jquery
• html
• pagination

Share Improve this question Follow edited Jul 9, 2010 at 3:51 Brock Adams 93.6k2323 gold badges241241 silver badges304304 bronze badges asked May 12, 2010 at 12:09 jb.jb. 1,91899 gold badges2727 silver badges4444 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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.

Two basic options:

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

You could try a couple of things:

Loading data Asynchronously and Paging