Javascript Datagrid That Uses Scroll Bars

[Arc]

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!

[johanafm]

Arc;10943264 wrote:

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.

These two things are unrelated. The scrolling works in a certain way depending on your markup (or the dom tree manipulation equivalent when using javascript).
Sorting deals with nothing other than in which order your data is put in its place. If you use markup that allows for the scrolling behaviour you want, then use javascript to resort your data, you still have a scrolling that works. If you don't have that scrolling the first place, you could still resort data, and still have non-working scrolling.

Arc;10943264 wrote:

For instance, I have used this Javascript and it looks and works great, except the header scrolls with the data....
http://phatfusion.net/sortabletable/

If you don't allready use Firefox, download it. Then get the Firefox addon called Firebug. Or use equivalent behaviour for your browser of choice if it exists and works well.
Rclick an element in the table and click inspect element in the context popup menu. It takes no more than a 5 second glance to realize that the html markup for this table is exactly what it should be

<table>
	<thead>
		<tr><th></th></tr>
	</thead>
	<tbody>
		<tr><th></th></tr>
	</tbody>
</table>

And it works great in browsers that implement tables as they should be. But the microsoft crap browsers doesn't work. Which means that while the markup is what it should be, it is not what it needs to be!

Now, having a look at the example1.html page, an rclick in the table header and inspect element quickly shows us that the markup is something like this

<!-- separate table for thead section -->
<table>
	<thead>
		<tr><th></th></tr>
	</thead>
</table>
<!-- Extra div to implement scrolling -->
<div style="height: ”TABLE's” VISIBLE HEIGHT; overflow-y: scroll">
	<!-- The actual data table -->
	<table>
		<tbody>
			<tr>
				<td></td>
			</tr>
			<!--  and so on -->
			<tr>
				<td></td>
			</tr>
		</tbody>
	</table>
</div>

What actually happens is that the contents of the div are scrolled (the entire table is moved up and down).

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

Arc;10943264 wrote:

I want that functionality, but with Javascript. Anyone know of something like that?

Well, I havn't used phatfusion sortable table, but it would surprise me a lot if it doesn't allready have what you need, except for one tiny detail.

1. Setup a table for the table header as in the first html code snippet here.
2. Setup a container div for "table" height, and contained therein, you put the table to hold the actual data
3. modify the code base to use a second table for events that are put on the header.

And now you have the best of two worlds.