• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Scrollable Table with Jquery?

 
Ranch Hand
Posts: 426
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
The only one I ever use...

http://www.trirand.com/blog/
 
Mark Reyes
Ranch Hand
Posts: 426
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Posts: 426
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
If you go to their demos and look under 'New in version 3.3 -> HTML Table to Grid'
 
Mark Reyes
Ranch Hand
Posts: 426
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Posts: 426
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 426
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Once upon a time there were three bears. And they were visted by a golden haired tiny ad:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic