Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to dynamically reorder table content ?

Tables ehancement

How to dynamically reorder table content ?

by  Targol  Posted    (Edited  )
Let's say you're working with ASP or JSP and that you displayed the return values of a "SELECT ... ORDER BY..." query into a TABLE. Let's say again that your query brings back too many rows to be seen on one screen. Here is a sample code that permits to reverse the order of the rows in a table without any call to server (no traffic on network, only client script). May be this'll help some...
Code: 
<html>
<head>
<script language="jscript">
  function reorder(listName, order) {
    var oHid_Order = document.getElementById("hid_" + listName + "_order");
    if (oHid_Order.value == order) {
       // Nothing to do : the order is allready good
       return;
    } else {
      oHid_Order.value = order;
      var oTable = document.getElementById(listName);
      var nbRows = oTable.children.length;
      var firstNode = oTable.children(0); // the first node will be reference.
      for (var i=1; i<nbRows; i++) {
         // What we are doing : get last row, delete it 
         // and recreate it before reference node
         var curNode = oTable.children(nbRows-1);
         curNode.removeNode(true);
         oTable.insertBefore(curNode, firstNode);
      }
    }
  }
</script>
</head>
<body>
  <input id="hid_list1_order" type="text" value="asc" />
  <input type="button" value="sort asc." onclick="reorder('list1', 'asc');" />
  <input type="button" value="sort desc." onclick="reorder('list1', 'desc');" />
  <table>
    <tbody ID="list1">
      <tr>
        <td>Value 1</td>
      </tr>
      <tr>
        <td>Value 2</td>
      </tr>
      <tr>
        <td>Value 3</td>
      </tr>
      <tr>
        <td>Value 4</td>
      </tr>
      <tr>
        <td>Value 5</td>
      </tr>
    </tbody>
  </table>
</body>
</html>
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top