Sortable tables with multiple pages navigation

[Raphas]

Hi,

there are a lot of different scripts out there to sort a table with multiple
columns. However, I want to do something specific.
I have a table that is "spread" accross multiple pages. Usually, when a user
wants to change the page, what you do is compute indexes in the server and
return the modified list. But that's not what I want to do, I want to be
able to navigate through the pages AND be able to sort the columns within
the client screen.

Does anyone know of a good example of something like that ? I know it can be
done, I would have to write the entire data in the client side, and then
manipulate it with indexes and sorts. I am very much able to write such
data, but should "delete" and "add" new table Elements (in a way that is
browser compatible) or show/hide <TR> elements, maybe overwrite these table
rows ?
I was wondering if this is somehow trivial so you can suggest a coding
strategy or if anyone knows a good page that displays this possibility.

Thank you
Raphas

 

[Phrogz]

Raphas wrote:
[snip]

manipulate it with indexes and sorts. I am very much able to write such
data, but should "delete" and "add" new table Elements (in a way that is
browser compatible) or show/hide <TR> elements, maybe overwrite these table
rows ?

I would suggest testing both approaches on your target
machines/browsers. It really should be quite easy to write simple test
cases for both to see how they perform.

(And then report back, because I'm interested in knowing how it turns
out.)

My *guess* is that:
* If you create and destroy a lot of DOM nodes, that will be slow.

* If you are changing a LOT of rows' display styles, you will find a
noticeable lag here, too. Plus, having all rows as DOM nodes may be
memory intensive (depending on data size).

* You'll get the best speed out of keeping the data as pure JS objects,
and re-using a small fixed number of row/cell elements for display,
batch changing the values in them. But this will be the most annoying
to code.

 

[Matt Kruse]

there are a lot of different scripts out there to sort a table with
multiple columns.

I'll soon be releasing mine, which beats all the ones I've seen

I have a table that is "spread" accross multiple pages. Usually, when
a user wants to change the page, what you do is compute indexes in
the server and return the modified list. But that's not what I want
to do, I want to be able to navigate through the pages AND be able to
sort the columns within the client screen.

Client-side pagination? Why? A better approach, IMO, would be to fix the
height of the tbody and let the users scroll down in the long table. Forcing
them to click to flip between pages would be annoying, IMO.

If you want to do it, though, I would suggest hiding/showing TR's. It's
pretty fast in most browsers. I've filtered 2000-row tables in under a
second by showing/hiding TR's and it works great.

So on page 1, you can show rows 0-24 and hide all the rest. When you click
on "next page" you can hide 0-24 and then show 25-49. To the user, it will
look like they are paging through results. Then hook in a function to call
to show what page you're on and you're set. Shouldn't be that hard at all,
actually!

 

[Raphas]

Hi,
Thanks for you guys answer.
I agree with you on the multiple pages, this isn't really the best UI,
although I can't change anything about that : users have to be able to click
through pages.
I'll try your approach which shouldn't be too hard you are right, but how to
I hide/show rows (<TR id="row">) ? Does this work like layer visibility ?

Raphas

you have a point, I wanted