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;

Code:

<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 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.

Code:

<!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>

Thread: Reorder/Reorganise Table

Thread Tools

Search Thread

Reorder/Reorganise Table

Bookmarks

Bookmarks

Posting Permissions