How to speed up scrolling through large tables?

I have a number of large tables I'm displaying to the user in tabs, one table per tab. The tables can get large to the point of causing speed issues, with anywhere up to 5000 rows and 100 columns. When the tables get this large, switching between tabs and scrolling in the tables becomes slow. So I'm looking for ways to speed up viewing the table contents. Here's some other information about the page setup; I'd post an example but I don't have one that fine to post.

I implemented a header/row lock on the tables so that the thead and the first 4 columns in each row are always visible, because what was being done before didn't have the scroll lock and looking at a majority of the table was pointless because you couldn't tell what you were looking at; the identifying cells weren't visible anymore.

For most of the data sets I'm viewing through this there aren't any issues but when the tables reach the aforementioned size, just attempting to scroll through the tables it takes a few seconds for the browser to catch up. I'm guessing the browser doesn't like the amount of content on the page, so I'm trying to figure out a good way to speed things up.

I've already done a number of things with the page from my initial ideas because it was even slower before. I've taken most of the load off of Javascript by having the 'locked' tables being constructed in PHP rather than attempting to dynamically convert regular tables, and that helped significantly. The only things that I'm doing in Javascript now are making the ajax calls for each table, appending the returned html code to the page, resizing the table's div container if necessary, and setting up the scroll trigger so the fixed header and fixed sides scroll along with the content, and I don't think there's significantly more I can take off of the Javascript engine at this point.

I think having some virtual scrolling or pagination implemented for the tables could help, but I'm not sure how to go about implementing it myself. I've found a number of things that have those features, but don't have the scroll lock that I need, so I don't think I'll be able to get something that's already out there for use. (Even with showing less rows per 'page', I can't think of a way to get around the fact there's ~100 columns). I think rather than just sending the html for the tables from the php script, I can send an array that has a row's HTML per index or something. Then when I load a page I can join the relevant section of the array, remove the previously displayed section, and dump the joined HTML code to the page. That way there's only one .append per page change. But before I went ahead and tri开发者_StackOverflowed to implement something like that only to find it didn't really help, that it causes other issues, etc., I figured I should get other ideas or suggestions.

It seems to me that you try to find a technical solution for a wrong posed problem.

Let us analyse a little your problem. If you has a table having about 50,000 cells (5,000 rows and 100 cells) if wold the wrong way to show all the information to the user.

First of all no display are able to show the information at once. Placing of all the information of one HTML page and scrolling in browser not better as for example the paging with respect of paging buttons. Having small size of HTML page will improve the performance in many times from the user point of view.

One more important point is that the user can't perceive all the information from 50,000 cells. The user have to analyse the information. The usage of background colors in cells or rows can improve the user experience (look at here for example). The usage of some other controls like here or here can help to reduce the number of columns which you need to display and help user to analyse the information quickly.

Moreover you should gives the user the possibility to display subset of the information based on some filters and sort it in special order. See toolbar filtering here or an example of the searching dialog here. In the searching fields you can use jQuery UI Autocomplete or other controls which will help the user. You can additionally include some additional controls on the table which are specific for your problem and which help the user to set more problem specific filters.

So you should consider the ways of the data filtering which can be better for your case. It can be that the information which you need to display could be better represented as Tree, a grid with subgrids or use just two grids (master and another with details of the item selected in the master grid). Probably the grouping of data is what the user need. Look at the jqGrid demo page for example and consider more different possibilities of the user interface which you can use for your problem.

We too encountered such problems and for our better management of grid, we have shifted from .net or infragistics grid to jqgrid.

You can also look on demos at following location.

http://www.outperformtechnologies.com

I would take a look at SlickGrid:

https://github.com/mleibman/SlickGrid/wiki

It has the ability to load data from a web service using AJAX. This way you only have to actually render a set number of rows at a time. Good lucking finding any good documentation for it though....

Honestly, I didn't read everything :) But I think 2 solutions: paging or "dynamically load" the rows as you scroll, both solutions are with ajax

as with Santiago- I didn't read the whole thing either,
but if I get the gist of it, i'd suggest jqGrid, which was designed specifically to handle large amounts of data.
I'm not 100% sure on how it would handle large amounts of columns, but i'd recommend giving it a try.