javascript for sortable tables

May 27, 2007

Here's a great javascript called sorttable for making tables in any HTML page sortable.

The instructions also remind an HTML developer that it is valuable to markup your table rows with the thead, tbody and tfoot tags to identify the logical parts of your table for better interoperability and autodiscovery. Also use th instead of td for the header cells. I am an offender in this regard, but I will try to do better from now on. As Jon Udell explains so well, it is part of improving the web as an information resource. It also makes plug-and-play with tools like this "sorttable" javascript easier.

In the HTML for an example table, all I needed to do was specify the class "sortable."

<table class="sortable">
  <thead>
    <tr>
      <th>Rank</th>
      <th>Name</th>
      <th>Net Worth (bil)</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>William Henry Gates III</td>
      <td>$53.0</td>
      <td>50</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Lawrence Joseph Ellison</td>
      <td>$19.5</td>
      <td>62</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Paul Gardner Allen</td>
      <td>$16.0</td>
      <td>53</td>
    </tr>
    <tr>
      <td>15</td>
      <td>Steven Anthony Ballmer</td>
      <td>$13.6</td>
      <td>50</td>
    </tr>
  </tbody>
</table>

I like how it automatically decides the dollar sign values are numeric in this little table based on Forbes' Richest Americans in the Software Industry.