Javascript Datagrid That Uses Scroll Bars
Hey guys.
I am looking for a Javascript Datagrid that will populate based on database driven data, but also allows the data in the list to scroll sepereately from the Header. This is so I can allow users to sort data without making another database call on each sort.
For instance, I have used this Javascript and it looks and works great, except the header scrolls with the data....
http://phatfusion.net/sortabletable/
That works great with dynamic database data....but the header dissapears when using a scroll bar.
I am looking for something that works like this, but is not ajax and does not query the database with each sort. http://reconstrukt.com/ingrid/src/example1.html
See how the data scrolls, but the header stays put? The pagination onthat example is not needed and in fact I would rather it didn't have that capability.
I want that functionality, but with Javascript. Anyone know of something like that?
Thanks!
Re: Javascript Datagrid That Uses Scroll Bars
I don't have an example (the code I'm working on for a scrollable datagrid is still being developed), my example does not include sorting:
1) Your table HTML will need to look like this:
Code:
<table id="abc">
<thead>
<!-- your header here -->
</thead>
<tbody>
<!-- your rows here -->
</tbody>
</table>
2) Use CSS to specify the height of the tbody element and overflow to auto.
This will allow scrolling on your data rows whilst keeping your header static.
Issues:
1) The data on the right hand side may be covered up by the scroll bar
2) If you only have a small amount of data you might find each row height has been auto set to take an equal share of your tbody height, this can be overcome within JavaScript.
Conclusion:
It will be really easy to do this