This week's book giveaway is in the Servlets forum.
We're giving away four copies of Murach's Java Servlets and JSP and have Joel Murach on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes Scrollable Table with Jquery? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Murach's Java Servlets and JSP this week in the Servlets forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Scrollable Table with Jquery?" Watch "Scrollable Table with Jquery?" New topic
Author

Scrollable Table with Jquery?

Mark Reyes
Ranch Hand

Joined: Jul 09, 2007
Posts: 426
Hi,

I was looking for a scrollable table with fixed header and a scrollbar. I saw older post that still uses a lot of css hacks at the net

I was hoping there's a jquery plugin for this. Can you share it with me please?

Also, is a plugin for this considered an overkill or jquery enhances browser compatibility because of this?

Thanks


Sean Clark ---> I love this place!!!
Me ------> I definitely love this place!!!
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

The only one I ever use...

http://www.trirand.com/blog/


GenRocket - Experts at Building Test Data
Mark Reyes
Ranch Hand

Joined: Jul 09, 2007
Posts: 426
The only one I ever use...


Hi Gregg, this one is really good. I tried using this in one of the page. But, I have a separate page wherein, user does not want any pagination but rather just display the data
as it is. The amount of records may vary and could reach thousands so I used display tag with Spring and generate the records at the server, it display correctly but its a little larger
on the page

It has many columns also, and most of the solutions that I got only uses a vertical scrollbar. I need both horizontal and vertical scrollbar to appear.

Is there any jquery plugin or css solutions. Any thoughts about this?

Thanks
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

Mark Reyes wrote:Any thoughts about this?


I generally have a "rule of 3" when it comes to doing things that I think are asinine but the client wants it anyway. I'll recommend better approaches 3 times. After the 3rd time, I do it the way they want in its simplest form and I'll document that fact and the client will sign off on it. That way when they finally realize their way is stupid, I have it documented they really wanted it that way.

In a case where someone wants to see thousands of rows with no pagination, and there is no talking them of it, I'll generally recommend an Excel export rather than actually building a page. They want to see thousands of rows because they are used to looking at the data in Excel, in most cases. So just give them what they really want.

That said, you don't have to page with jqGrid. You can show all the records in a single scrollable jqGrid table. jqGrid doesn't even require an Ajax request to fetch the data. It will take a standard HTML table with all the data and render it as a scrollable grid for you. If that is still more than you can give them, give the tbody an overflow:auto style and add an empty 25px column to account for the scrollbar.

Mark Reyes
Ranch Hand

Joined: Jul 09, 2007
Posts: 426
You can show all the records in a single scrollable jqGrid table. jqGrid doesn't even require an Ajax request to fetch the data


Hi Gregg, pardon me for my ignorance but can you give me a hint on how to do this? I check on the demo of jqgrid but I only see loading data from
an array data source.

Is it really possible to convert a standard html table with thead and tbody into a jqgrid with scrollable option? Can you give me hints on this please...
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

If you go to their demos and look under 'New in version 3.3 -> HTML Table to Grid'
Mark Reyes
Ranch Hand

Joined: Jul 09, 2007
Posts: 426
If you go to their demos and look under 'New in version 3.3 -> HTML Table to Grid'

Hi Gregg, Thanks..
I was able to use Jqgrid and display a fixed header table.

But I notice one problem into it. If I have more columns than there is to fit, the jqgrid expands
by itself and it does not respect the width assigned into it.

Any thoughts?


If I set this one on the containing div, the horizontal scrollbar appears but the vertical scrollbar disappear. In order for it
to appear, you need to scroll farther to the right, which I think is not user friendly.



I have been searching the web for some time now, but I cant find other good resource to answer my needs.
I basically want to have a table with fixed header that can be scrolled vertically and horizontally. There are too many columns
so I need to have scrollbars on the horizontal side.
Is there any css hacks available for this?
Mark Reyes
Ranch Hand

Joined: Jul 09, 2007
Posts: 426
Hi All,

I am having some trouble when it comes to fixed header table in my HTML Page.

The table that I want to display has so many columns so I need both vertical and horizontal scrollbars.
I tried practicing with so many jquery plugins like jqgrid/fixedheadertable and have manage to
somewhat display it correctly.

But I am encountering problem when the record reaches up into 1000+ records. All scripts seems to hang up and firefox is shouting
with 'Script has not responded. Stop script?' pop up command

Should I say to my user that its not possible?

I am thinking that CSS hacks could solve this. Can the CSS Guru's here help me out please...
Mark Reyes
Ranch Hand

Joined: Jul 09, 2007
Posts: 426
Hi All,

In case somebody might be interested if they found this post. I found a solution here

Pure CSS approach is better than having javascript align this for you if the amount of rows is so many.

I have managed to have IE7/IE8 and FF display a scrollable table until IE6 joins the party and ruin everything... sucks!

Anyway thanks, I will just apply some hacks applicable to IE6 only.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Scrollable Table with Jquery?
 
Similar Threads
Which version of struts 2 is suitable for struts2-jquery-plugin-3.0.2.jar
Align Two Tables Vertically
How to make the 'TH' field keep floating on pg up/pg dwn.. thanks :)
Jquery For struts 1.2?
Extendable Table column width