Log in

View Full Version : Reorder/Reorganise Table


MrRSMan
12-09-2007, 05:42 PM
My aim is to have a table, consisting of several columns and for the visitor to be able to reorder the contents of a table. My code example is below;


<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td width="33%" align="center"><u><b>Name</b></u></td>
<td width="33%" align="center"><u><b>Age</b></u></td>
<td width="34%" align="center"><u><b>Date</b></u></td>
</tr>
<tr>
<td width="33%">John</td>
<td width="33%">48</td>
<td width="34%">13</td>
</tr>
<tr>
<td width="33%">George</td>
<td width="33%">52</td>
<td width="34%">6</td>
</tr>
<tr>
<td width="33%">Jack</td>
<td width="33%">39</td>
<td width="34%">22</td>
</tr>
</table>


So for example, if someone wanted to reorder the table according to "Date", they could just click a button to order the table according to ascending date, and another for descending, and the same for each other column.

I have seen this done using "id" and "alt" tags (I think), but I think this is PHP. Is there a way of doing this using HTML or JavaScript- or anything other than PHP or ASP? I am not using SQL.

Thank you, in advance :)

MrRSMan
BYK
12-09-2007, 06:24 PM
Javascript can sort arrays according to the standart alpha or numerical sort systems or according to a function defined by you.

But you should generate an array which has built with objects containing both the requested sort column's data, the column and the rest of the row.
MrRSMan
12-09-2007, 07:13 PM
Could you tell me how to do this please?
BYK
12-09-2007, 07:39 PM
Actually I did not experienced enough about this sorting stuff and I do not think I can quickly write a code which is optimized enough.

May be someone else will help you but I saw free libraries which exactly does what you want. Standardista (http://www.workingwith.me.uk/articles/scripting/standardista_table_sorting) was a good one of them ;)
Trinithis
12-09-2007, 08:25 PM
Note: I would have used Array.prototype.slice instead of Array.prototype.filter, but the former had error issues with IE for some obscure reason, and I didn't feel like overriding the method.



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
</head>

<body>
<div>

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td width="33%" align="center"><u><b>Name</b></u></td>
<td width="33%" align="center"><u><b>Age</b></u></td>
<td width="34%" align="center"><u><b>Date</b></u></td>
</tr>
<tr>
<td width="33%">John</td>
<td width="33%">48</td>
<td width="34%">13</td>
</tr>
<tr>
<td width="33%">George</td>
<td width="33%">52</td>
<td width="34%">6</td>
</tr>
<tr>
<td width="33%">Jack</td>
<td width="33%">39</td>
<td width="34%">22</td>
</tr>
</table>

<script type="text/javascript">

if(!Array.prototype.forEach) {
Array.prototype.forEach = function(f /*, context*/) {
for(var i = 0, n = this.length, t = arguments[1]; i < n; ++i)
f.call(t, this[i], i, this);
};
}

if(!Array.prototype.filter) {
Array.prototype.filter = function(f /*, context*/) {
for(var i = 0, n = this.length, r = [], t = arguments[1], v; i < n; ++i)
if(f.call(t, v = this[i], i, this))
r.push(v);
return r;
};
}

Array.prototype.filter.call(
document.getElementById("AutoNumber1").getElementsByTagName("tr"),
function(x, i) {return i != 0;}
).sort(
function(a, b) {
a = a.getElementsByTagName("td")[2].firstChild.nodeValue - 0;
b = b.getElementsByTagName("td")[2].firstChild.nodeValue - 0;
if(a < b)
return -1;
if(a > b)
return 1;
return 0;
}
).forEach(function(x) {
x.parentNode.appendChild(x);
});

</script>
</div>
</body>
</html>