Sorting a table

[Webskater]

Having looped through a recordset I am displaying data in a table with a row per record - standard stuff.

I want to be able to sort this table by clicking on the text in a heading over each column - without going back to the server - so I need to do it with javascript.

I am not looking for a coded answer, but I would be grateful for any guidance on the the best way of going about this.

[Jona]

You mean like.. you want a table that you click "Sort [sectionName] to the top" and it sorts [sectionName] to the top? Framed or non-framed? I've got a great code for you :)

[Webskater]

Here's an example. I know it won't display very well - can you use html here? Anyway.

Employee-----Sales----Profit
Bill Smith------2,500----600
Mike Jones----3,500----700
Jim Wise-------4,500----900

You click on "Employee" the whole table sorts on Employee. You click on "Sales" the whole table sorts on sales etc.

[Jona]

So you click on Employee and your result is?

Employee: ---------- -----------
----------- Name1 Name2
----------- Name3 Name4

?

[Webskater]

Click on employee and the list sorts alphabetically by employee surname:

Employee-----Sales----Profit
Mike Jones----3,500----700
Bill Smith------2,500----600
Jim Wise-------4,500----900

Click on Sales and it sorts by sales in descending order:

Employee-----Sales----Profit
Jim Wise-------4,500----900
Mike Jones----3,500----700
Bill Smith------2,500----600

Click on Sales again and it reverses the sort:

Employee-----Sales----Profit
Bill Smith------2,500----600
Mike Jones----3,500----700
Jim Wise-------4,500----900

etc. So, every time you click a header it reverses the sort of the table using the column clicked as the primary sort.

[Jona]

Let's see.. well, you want to do this dynamically? If so, you'll have to assign a variable name to each table data row. Then, you sort them in order.

You can also do each one individually, something like....

var name = new Array()
name[0] = "Mike Jones"
name[1] = "Bill Smith"
name[2] = "Jim Wise"

then use the For loop to go through them.

Then use a new Variable for...

var sales = new Array()
sales[0] = "3,500"
sales[1] = "2,500"
sales[2] = "4,500"

and for profit as well. You'll want to keep them in order, though. And you can try <A HREF="javascript:doFunction()">Employee</A>

<SCRIPT>
function doFunction() {
document.write("<TABLE><TR>");
document.write("<TD>Employee</TD>")
document.write("<TD>Sales</TD>")
document.write("<TD>Profit</TD>")
document.write("</TR><TD>")
document.write(name[i])
document.write("</TD>")

Or something like that....

[Webskater]

Thanks Jona.
I can see that I need to loop through the rows in the table and build arrays containing the data in each column (table cell). What I can't figure is how, if I re-sort the data in one array I keep all the other arrays in sync.
Using my example, re-sorting on the name might mean Row 1 becomes Row 2, Row 2 becomes Row1 and Row3 stays where it is. I can't work out how to tell the other arrays to do the same thing.
If you have any thoughts on this I would be grateful for them - but don't think I am being rude if you reply and I don't - I'm 5 hours away from getting up from work so I need to get some sleep.
Cheers.

[Jona]

OK, well, I'll think....

OK, you can also try to use...

var name1 = "Mike"
var name2 = "Bill"
var name3 = "Jim"

document.write("<TABLE>"); // fill in the document.write()'s with your tables and rows
document.write("<TD>" + name1 + "</TD>")

etc.

But then you'd have to reload the table each time... Hmm.. but it will work for sure..

[Jona]

You have yourself hidden, Dave.. just wondering--why?

[Jona]

Just wondering--why?

lol, I think we can stop there :)

[Vladdy]

See my implementation: http://www.vladdy.net/webdesign/DOM_Tables.html

[Webskater]

Originally posted by Dave Clark
'Tis easier (and more efficient) to have your server-side code build a JavaScript array and then send the whole page to the client. At the client, JavaScript takes the array and dynamically builds the table. When a column header is clicked, JavaScript merely sorts the array and re-builds the table -- ignoring the table, that was previously built, altogether (very efficient).


Thank you for all your replies. Dave, I've done what you suggested before - i.e. building a multi-dimensional javascript array server side as I loop through the asp code that is building the table that displays the recordset. However, I found it very slow because the code to build multi-dimensional javascript arrays ended by being massive. I mean literally, the html file size downloaded after populating the arrays was 3 times bigger than when just building the table in asp code. So, I am keen to do the whole thing client side.