User not logged in - login - register
Home Calendar Books School Tool Photo Gallery Message Boards Users Statistics Advertise Site Info
go to bottom | |
 Message Boards » » Scrolling tables with fixed headers (HTML/JS/CSS) Page [1] 2, Next  
Golovko
All American
27023 Posts
user info
edit post

Ok so this has been an issue at work for some time. We have really huge tables with lots of columns and rows. They wanted a fixed header and only the tbody to scroll. If you've ever done this or tried to do this you will know that it is a huge pain in the ass to do it properly.

Some people load 2 tables and hide the thead on one and the tbody on the other and place one in a overflow:scroll/auto div. This is messy to code and really slow on performance if you are dealing with a lot of data.

Other ways to do it is not even use proper table tags and do it all in divs (again bad. tabular data should almost always be displayed in tables)

So I put together a really small (~4kb) jQuery plugin that will build a table using valid HTML and have a fixed header and optional fixed footer and will resize the table to fit inside whatever div you put it in. So if you want the table to auto-resize to fit your browser window it can.

All the developer has to do is include the plugin js file, jquery, and the stylesheet. Setup their table like normal (proper table tags) or use something like displayTag if you do any java/jsp development. And give whatever tables you want to have fixed headers/footers a specific class name. It will do the rest.

I'm going to upload it to my blog so anyone that wants to download it can give it a try. Just thought i'd help out any fellow developers that have run into similar issues in the past/future.

I should add that it includes rounded corners on all 4 corners of the table (top two of the header/bottom two of the footer) and the stylesheet is setup in a way that adding your own theme is simple.

[Edited on October 2, 2009 at 6:02 PM. Reason : .]

10/2/2009 6:01:00 PM

Golovko
All American
27023 Posts
user info
edit post

forgot to add:

This is supported for IE6, IE7, IE8, Firefox and Safari.

10/2/2009 7:41:36 PM

DPK
All American
2390 Posts
user info
edit post

Link to blog? You should also submit this to webappers.com.

10/2/2009 7:45:19 PM

Golovko
All American
27023 Posts
user info
edit post

^thanks for the link. I'll do that as well.

as for the blog link...working on that right now haha...I've got a wordpress blog setup on my dev server that i never published so this weekend is a good time to do that. Just going to use a free wootheme until I have time to make my own just so i can get this out today/tomorrow.

10/2/2009 7:49:45 PM

nacstate
All American
3785 Posts
user info
edit post

If you want to write up a little bit of a tutorial for it you can load it up to nettuts. They pay $150 if they publish it on the site.

10/3/2009 9:12:06 AM

kiljadn
All American
44690 Posts
user info
edit post

does yours work only with static data? or can I load stuff through JSON/AJAX?


I've been using jqGrid to do this sort of stuff.

10/3/2009 12:18:07 PM

Golovko
All American
27023 Posts
user info
edit post

^I'm working on getting it to work with a buffered Ajax call so as you scroll the table it requests more and more data. This will eliminate the need for pagination.

I'm also working on making it work with Ajax/dwr (reverse ajax) because I can make a more slick loader that way and it doesn't slow the initial page load down. It's better to load the UI then load the data.

^^Sweet...i didn't know about that either. I'll check that out too.

[Edited on October 3, 2009 at 12:50 PM. Reason : .]

10/3/2009 12:47:21 PM

kiljadn
All American
44690 Posts
user info
edit post

so... kinda like a lazy load?

You sure you want to do that to eliminate pagination without having sortable/searchable?

The more data in a table, the more confusing and harder to manage it becomes.

In practical application, there is no difference in functionality between lazy loading and pagination - both load chunks of data into a viewable window at a user-controlled pace - but IMO pagination makes a user feel safer.

IE: "I saw that info on Page 3" vs. "I have to pick that data out from a 1800 item long list, somewhere between Invoice #45634343 and #46008764"

10/3/2009 1:34:43 PM

Golovko
All American
27023 Posts
user info
edit post

I've noticed that with a lot of other plugins they don't account for the scroll bar so the last column gets cut off and you have to side scroll to see the entire cell. I do take account the size of the scroll bar and add it onto the outside of the table so that no columns are cut off and require side scrolling. Although visually it looks like its on the inside of the table. (I wouldn't want an ugly scroll bar throwing off the edge of my tables.)

The only reason I'm going to add side scrolling is for situations where your table is so narrow that the browser can't fit all columns in view because its run out of breaking points in the text.

^I see your point. the tables I display for work also have filters so if the user really wanted to get to a certain piece of data they'd have to use filtering. Right now we do use pagination but chances are if you saw a piece of data on page 3 that you wanted it might not be on page 3 for long. Rico LiveGrid has a pretty cool ajax buffering system.

10/3/2009 1:48:27 PM

Golovko
All American
27023 Posts
user info
edit post

here is the link to the blog. http://dev.mmalek.com/

Keep in mind this is still in beta and not ready to be used by others just yet but will be hopefully by tomorrow evening. It does work in IE but at the moment it doesn't because i've made some changes to the javascript. I'm having to rewrite bits and pieces at a time to follow the proper jQuery plugin standards so that it easily integrates into jQuery and you can still use noConflict() if you also use a library like prototype that utilizes the $.

Also I just threw the site together late last night at like 4am so I still need to write out proper documentation since things have changed since last night and setup a better demo. So please ignore all that garbage for now

I also need to write instructions on how to create your own styles...that is also sloshed together

10/3/2009 4:01:22 PM

Golovko
All American
27023 Posts
user info
edit post

updated url: http://fixedheadertable.mmalek.com

it now follows the proper jQuery plugin setup...still working on getting the autoresize options to work again...

[Edited on October 4, 2009 at 9:49 PM. Reason : .]

10/4/2009 9:48:56 PM

Ernie
All American
45943 Posts
user info
edit post

That's a nice WP template

10/4/2009 10:51:38 PM

Golovko
All American
27023 Posts
user info
edit post

^yeah it was one of the freebies from http://woothemes.com Don't have the time right now to make my own and i just wanted to get this up and running. They've got a bunch of really nice ones.

10/5/2009 12:41:34 AM

Golovko
All American
27023 Posts
user info
edit post

http://plugins.jquery.com/project/fixedheadertable

10/5/2009 2:14:30 AM

Noen
All American
31346 Posts
user info
edit post

very cool Mark! Keeping an eye on this for sure.

10/5/2009 6:42:57 AM

kiljadn
All American
44690 Posts
user info
edit post

You can add Google Chrome to the list of supported Browsers, btw

10/5/2009 9:16:37 AM

Golovko
All American
27023 Posts
user info
edit post

oh sweet. haha totally forgot about Chrome

^^Thanks!

[Edited on October 5, 2009 at 9:22 AM. Reason : .]

10/5/2009 9:22:10 AM

Golovko
All American
27023 Posts
user info
edit post

Just added side scrolling if the table columns can't be compressed anymore to fit them all into view.

fixed header scrolls as well (all with 1 scrollbar)

http://fixedheadertable.mmalek.com/demo/fullwindowdemo.html

10/5/2009 9:59:39 PM

joe17669
All American
22728 Posts
user info
edit post

Quote :
"oh sweet. haha totally forgot about Chrome "


no love for Opera?

10/5/2009 10:13:03 PM

Golovko
All American
27023 Posts
user info
edit post

well if it works in FF/Safari it probably works in chrome/opera/etc... its IE thats the concern

10/5/2009 10:15:13 PM

joe17669
All American
22728 Posts
user info
edit post

it looks cool in firefox, not so good in opera. actually in opera i just see the headings

http://i36.tinypic.com/293dp91.png

10/5/2009 10:18:46 PM

Golovko
All American
27023 Posts
user info
edit post

the javascript populates the tbody so thats really odd that its not firing.

10/5/2009 10:21:08 PM

Golovko
All American
27023 Posts
user info
edit post

I've gotten resizing the table on a browser resize working.

What are other features people would like to see in a table plugin? Anchored columns maybe with the side scrolling?

10/6/2009 4:15:29 PM

skokiaan
All American
26447 Posts
user info
edit post

I needed the exact same thing back in 2004. There were several things people were selling to do this. Now, there are many embed excel-like things into a webpage. also, i have found that scrolling a region within a webpage is kind of a sucky UI experience.

[Edited on October 7, 2009 at 12:06 AM. Reason : d]

10/6/2009 11:59:00 PM

Golovko
All American
27023 Posts
user info
edit post

Quote :
"i have found that scrolling a region within a webpage is kind of a sucky UI experience."


that all depends on what you are scrolling. The way I use scrolling tables is by resizing the height of the table so that all other content fits on the page without needing a scroll bar. Fixed headers when looking at 1000's of rows of data is essential.

10/7/2009 3:10:30 PM

rynop
All American
829 Posts
user info
edit post

that's real slick man. perfect timing, i was looking all over the web for a good one - even better that its a jquery plugin.

feature request: sortable columns driven by JS.

I use http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited today. Have not tried your ish with the table sort script, but I have a feeling they wont play nicely together. If they do, then you don't have to do anything (I will report back here my findings when i get some time to test em together).

10/8/2009 4:58:33 PM

Golovko
All American
27023 Posts
user info
edit post

Sweet! Keep me posted and let me know if you have any issues or bugs that you find.

I've had a request to make the option to freeze a column (the first column) but haven't gotten around to that yet. I've got several ideas of how to implement it but haven't decided on one yet.

I'll also add sorting to the list.

[Edited on October 8, 2009 at 5:18 PM. Reason : .]

10/8/2009 5:17:51 PM

Golovko
All American
27023 Posts
user info
edit post

Whats a good way to manage open source code for users to download released version, beta versions, trunk etc... I'm getting a lot of hits and feedback on the plugin more than I expected so I'd like to have a clean way of providing different versions of the plugin to users. I was looking at google code is that the best option? I'm also using beanstalk to host my subversion tree which I believe I can make public with read only enabled?

11/13/2009 3:26:10 PM

BigMan157
no u
103354 Posts
user info
edit post

i personally dislike google code

11/13/2009 3:32:29 PM

Golovko
All American
27023 Posts
user info
edit post

Why? And what would you recommend instead?

11/13/2009 3:34:33 PM

Golovko
All American
27023 Posts
user info
edit post

So I guess google code is fine?

11/16/2009 12:15:58 PM

hydro290
All American
1703 Posts
user info
edit post

I use a combination of http://tablesorter.com/docs/ and some scrollable scripts i found on the web. They work on IE 6,7,8 Firefox 2,3 and the latest levels of Chrome and Safari. I'll have to check yours out when I get some time and see how it compares.

11/16/2009 5:48:31 PM

Golovko
All American
27023 Posts
user info
edit post

^I actually don't do table sorting yet...thats one of the planned features though. Does that solution do fixed headers/footers? I checked out there demo and it doesn't appear to but the table is only like 4 rows of data anyway.

11/16/2009 5:53:33 PM

hydro290
All American
1703 Posts
user info
edit post

Tablesorter alone doesn't support any scrolling. I had to combine it with another set of scripts to get it to work properly. Those scripts didn't have the cleanest code and I had to add several hacks. I know it did headers locked in place, but I'm not sure about footers. I'd definitely be interested in upgrading to a single plugin that could do it all, and from what I've seen yours look really cool. I'm looking forward to playing around with it.

[Edited on November 16, 2009 at 11:15 PM. Reason : :]

11/16/2009 11:09:48 PM

BigMan157
no u
103354 Posts
user info
edit post

http://webdesignledger.com/resources/12-useful-jquery-plugins-for-working-with-tables

11/24/2009 10:37:06 AM

Golovko
All American
27023 Posts
user info
edit post

^I saw that yesterday because I had a sudden surge in traffic from one referring site haha. Thanks for posting it though!

11/24/2009 10:37:44 AM

hydro290
All American
1703 Posts
user info
edit post

I really need to look into this. I thought the scripts I had on this one site worked in IE8, but they relied on setExpression, which is no longer supported. Had to use the EmulateIE7 header.

11/24/2009 11:11:07 AM

qntmfred
retired
40817 Posts
user info
edit post

nice job Golovko

11/24/2009 11:26:27 AM

Golovko
All American
27023 Posts
user info
edit post

Thanks!

11/24/2009 2:46:43 PM

kiljadn
All American
44690 Posts
user info
edit post

you've already done more updating than pretty much every other plugin author I've ever seen



time for you to fit in with everyone else and just let it stagnate for a year or two

11/24/2009 6:06:56 PM

Noen
All American
31346 Posts
user info
edit post

Quote :
"Whats a good way to manage open source code for users to download released version, beta versions, trunk etc... "


Try out TFS2010 -download

Here's a great basic install guide (it's braindead simple actually).

Once you get it installed, install Visual Studio 2010 Ultimate, or just Team Explorer, which you can use to create a Team Project, branches, and manage your code

Once you get it all downloaded, you should be up and running with everything in ~1.5 hours. It's actually pretty easy

[Edited on November 24, 2009 at 6:43 PM. Reason : .]

11/24/2009 6:41:56 PM

Ernie
All American
45943 Posts
user info
edit post

Even though I hate your stupid guts, I'm playing with this in a project I'm working on. I'll give you notes soon.

[Edited on December 16, 2009 at 9:32 PM. Reason : Is your personal site built on Codeigniter?]

[Edited on December 16, 2009 at 9:32 PM. Reason : It's the 404 page that makes me ask that]

12/16/2009 9:27:35 PM

Golovko
All American
27023 Posts
user info
edit post

^yeah it is. Its really old and in desperate need of a new design, updated content, etc. New one will also be built on codeigniter. I'm a big fan of codeigniter.

Quote :
"Even though I hate your stupid guts, I'm playing with this in a project I'm working on. I'll give you notes soon."


awesome, the more feedback I get the better.

12/16/2009 9:57:27 PM

Ernie
All American
45943 Posts
user info
edit post

This popped up in my Google Reader this morning

http://www.jankoatwarpspeed.com/post/2010/02/26/table-ui-patterns.aspx

2/27/2010 2:47:03 PM

Golovko
All American
27023 Posts
user info
edit post

Sweet! Thanks for posting it.

2/28/2010 6:44:32 PM

Golovko
All American
27023 Posts
user info
edit post

bttt.

Got a new release coming in the next few days that addresses performance issues when dealing with 1000's of rows of data.

3/17/2010 12:35:56 PM

smoothcrim
Universal Magnetic!
18968 Posts
user info
edit post

whats the difference in this and extjs/gwt?

3/17/2010 2:18:23 PM

Golovko
All American
27023 Posts
user info
edit post

http://www.noupe.com/javascript/jquery-html-table-toolbox.html

The plus side of using analytics is that I am finding more and more blogs that seem to have interesting posts relevant to my interests. Although a lot of what i am seeing are blogs from foreign countries in different languages. Lol

^for now it's a lot simpler and lightweight if you are already using jquery. Honestly I haven't used either of those but if it's anything like the average grid plugin then I stand by my statement.

4/14/2010 11:23:43 PM

gs7
All American
2354 Posts
user info
edit post

This thread remains relevant to my interests, thanks.

4/15/2010 11:18:53 AM

Ernie
All American
45943 Posts
user info
edit post

You're in my Google Reader again

http://cssglobe.com/post/8266/enhance-tables-using-one-of-30-functional-jquery-plugins

It bothers me, though, that your plugin is called Fixed Header Tables (plural) but your url is fixedheadertable.com (singluar)

6/6/2010 8:49:36 PM

 Message Boards » Tech Talk » Scrolling tables with fixed headers (HTML/JS/CSS) Page [1] 2, Next  
go to top | |
Admin Options : move topic | lock topic

© 2024 by The Wolf Web - All Rights Reserved.
The material located at this site is not endorsed, sponsored or provided by or on behalf of North Carolina State University.
Powered by CrazyWeb v2.39 - our disclaimer.