#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    15
    Rep Power
    0

    Using Javascript to sort a table.


    Hey guys,

    Here's my situation: I have a XML/XSL table that is generated server side and then parsed into HTML and sent to the client. I want the client to be able to click any of the headings of the table and have the table sort by that heading. Is this possible with Javascript?

    Thanks
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2003
    Location
    No es importante
    Posts
    2,065
    Rep Power
    14
    If you hold the table values in a client side array you can do this. This may not be the most feasible solution if the table is large.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    Ahhhh, what an interesting question. There really isn't much you can't do to documents with the DOM nowadays. And there really is no need to mirror any data whatsoever. Check it out:
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html
      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <title>Table sorting demo</title>
      </head>
      <script type="text/javascript">
        ///////////////////////////////////////////////////////////////////
        // The sortfunctions. Determine the order of rows. They return < 0
        // if  rowa belongs before rowb, == 0 if the rows are equal, and
        // > 0 if rowa belongs after rowb.
    
        // sortindex: sorts by index (first col)
        function sortindex(rowa, rowb) {
          // Determine the numeric indeces of the two rows.
          var indexa = parseInt(rowa.cells[0].innerHTML);
          var indexb = parseInt(rowb.cells[0].innerHTML);
          if (indexa > indexb)
            return 1;
          else if (indexa == indexb)
            return 0;
          else if (indexa < indexb)
            return -1;
        }
    
        // sortkeyword: sorts by keyword (second col)
        function sortkeyword(rowa, rowb) {
          // Get a string representation of each keyword.
          var stringa = rowa.cells[1].innerHTML;
          var stringb = rowb.cells[1].innerHTML;
          return stringa.localeCompare(stringb);
        }
    
        //////////////////////////////////////////////////////////////////////
        // sorttable: meant to be called from links/buttons on the page.
        // requires a function reference to be passed which will be used to
        // sort the rows (see sortindex and sortkeyword for examples).
        function sorttable(sortfunc) {
          // General strategy: Get a reference to each row that is to be
          // sorted, then apply the specified sorting function. We then
          // re-append the rows at the end of the table.
    
          // Get a reference to the table, we're going to need it more than
          // once.
          var table = document.getElementById("sorttarget");
    
          // Create an array of references to all the table rows that are to
          // be sorted. In this example, we sort all but the first row, since
          // it is a header row that has only sorting links.
          var sortedrows = new Array();
          for (var i = 1; i < table.rows.length; i++)
            sortedrows[i - 1] = table.rows[i];
          
          // Now, sort the array according to the sortfunc that was passed
          // to this function.
          sortedrows.sort(sortfunc);
    
          // For each row that is referenced in the newly sorted array,
          // re-append it at the bottom of the table. This effectively
          // moves the row. Note here we actually use the regular DOM since
          // it provides easier read/write access to the nodes.
          // Also note that tr nodes aren't direct children of the table
          // node, there is actually a 'hidden' tbody node!
          var tbody = table.tBodies[0];
          for (var i = 0; i < sortedrows.length; i++)
            tbody.appendChild(sortedrows[i]);
        }
      </script>
      <body>
        <table id="sorttarget">
          <tr>
            <td><a href="javascript&#58;sorttable(sortindex)">index</a></td>
            <td><a href="javascript&#58;sorttable(sortkeyword)">keyword</a></td>
          <tr>
            <td>1</td>
            <td>fum</td>
          </tr>
          <tr>
            <td>2</td>
            <td>fee</td>
          </tr>
          <tr>
            <td>3</td>
            <td>foe</td>
          </tr>
          <tr>
            <td>4</td>
            <td>fie</td>
          </tr>
        </table>
      </body>
    </html>
    The only thing about tasks like this is they're very implementation specific. The main sorttable function is very generic, it should work on any table as long as it has the proper id (sorttarget). The trick though, is what you pass to the function. You need to generate your own sorting functions: functions that determine which row is 'greater than' the others. The example I showed uses simple numeric and string parsing of the cells for individual rows.

    Take a look, and you should get a general idea of how to do it. Some of the code is definitely beyond basic javascript, like throwing around function references. If you aren't clear on something, just ask...

    Edit: I haven't had time to debug it in various browsers. Works in Moz, and I'd be surprised if it doesn't work in Opera or any other compliant browser. Explorer should manage as well.
    Last edited by MJEggertson; July 16th, 2003 at 04:38 AM.

IMN logo majestic logo threadwatch logo seochat tools logo