4

I have a large table of data with probably about 50 columns and a couple hundred rows. I have tried out many jquery plugins to freeze headers and columns but they don't seem to work correctly. After you add so many columns and rows, they either freeze or take forever to load. From what I can tell, the problem has to do with offsetHeight and offsetWidth but I don't know enough to fix it (or if it's even possible to fix).

I have tried using dataTables as well as fixedheadertable. I know that the problem is when I add the jquery. If I don't use jquery, the table loads instantly.

Does anyone have any recommendations or any ideas on how to do this without javascript? The data is a huge report so it all needs to be on 1 page. I need to be able to freeze 2 header rows and 2 columns. I also want the table to be able to expand to 100% width (and maybe 100% height).

Keith
  • 1,352
  • 3
  • 21
  • 48
  • 2
    What do you mean by "Freeze"? Keep them always visible? – Brigand Jan 27 '12 at 20:42
  • 1
    Based on your comment that, _"they either freeze or take forever to load,"_ you should probably consider that you're displaying way more data than a user can efficiently use... – canon Jan 27 '12 at 20:45
  • probably a duplicate http://stackoverflow.com/questions/1030043/html-table-headers-always-visible-at-top-of-window-when-viewing-a-large-table http://stackoverflow.com/questions/3593594/how-to-keep-the-header-static-always-on-top-while-scrolling – mas-designs Jan 27 '12 at 20:46
  • Yes, always visible. Just like in excel where you can freeze rows and columns. It is not way more data. This is a large report. It's not a duplicate. I actually use that plugin for other things. It wouldn't work for this. It only does rows. – Keith Jan 27 '12 at 20:48
  • probably the latest version of jqgrid can help? It has a feature now to freeze certain columns. Also, you can use css to keep the column row fixed. You probably need to use thead for that – DG3 Jan 27 '12 at 22:18

1 Answers1

3

I would break your table into two tables. Have the first table have nothing but your table headers, then put a second table underneath, with your table rows.

Then put that second table into a scrollable div, so that as your scroll your 100 rows, your headers will still be visible.

Something like this fiddle

Adam Rackis
  • 82,527
  • 56
  • 270
  • 393
  • @Keith - wouldn't the container that's holding your entire table scroll everything to the left and right? – Adam Rackis Jan 27 '12 at 20:55
  • That's the way to do it. Only that scrollable div's scrolling doesn't work well in all browsers. You could also place the "header-table" to an other frame, if frames aren't an S-word here in Stackoverflow. – Teemu Jan 27 '12 at 20:56
  • @Teemu - why would the scrolling div break in other browsers? Does older IE not scroll well if the content is a table? – Adam Rackis Jan 27 '12 at 20:58
  • @Adam, I want to be able to "freeze" columns also. I don't want the first 2 columns to scroll left and right – Keith Jan 27 '12 at 20:59
  • @Keith - it sounds like you're looking for a full fledged DataGrid. I would check out either Ext, or any other company that makes web widgets. – Adam Rackis Jan 27 '12 at 21:00
  • @Keith The problem with scrollable divs occurs in IE9 also. Especially scrolling with mousewheel, the scroll brakes occasionally, and then jumps forward. I don't know, if dynamically created TABLE has something to do with this issue. – Teemu Jan 27 '12 at 21:08
  • @Keith Looks like you will need frames anyway. And some jQuery or DHTML to scroll frozen columns vertical. – Teemu Jan 27 '12 at 21:20
  • @Adam Sorry, accidentally pointed the comment to Keith. Comment about scrolling is within your answer's comments for this issue. – Teemu Jan 27 '12 at 21:36