About Me

PBX My name is Paul Bissex, and e-scribe.com is my consulting business. I build web applications using as much open source software as possible. From September to June I teach web design and other important non-photographic professional skills to photographers. In the '90s I wrote technology commentary and reviews for magazines, newspapers, and web publications, including Wired, Salon.com, FamilyPC, the late lamented Web Review, and the Chicago Tribune. Feel free to email me.

Book Project

I'm co-authoring a book, "Python Web Development with Django", with Jeff Forcier and Wesley Chun. It will be published by Prentice Hall in July 2008, but is available for pre-ordering on Amazon now.

Colophon

This site is built on a fresh trunk checkout of Django, running on Python 2.5.1, served by Apache and mod_python. The database is SQLite. The operating system is FreeBSD, on a VPS hosted at Johncompanies.com. Comment-spam protection by Akismet. Vintage topo imagery from the Maptech archive.

Pile o'Tags

Stuff I Use

Akismet, del.icio.us, Django, dpaste.com, Emacs, FreeBSD, Freenode, jQuery, LaunchBar, MacPorts, Markdown, Mercurial, OS X, Postfix, Python, SQLite, Subversion, TextMate, Trac, Ubuntu Linux, wmii

(Finally!)

Sort tables with sorttable.js

I've been enjoying listening to the "Audible Ajax" podcasts from Ajaxian lately. One of the older shows was a talk by Lugradio's Stuart Langridge in which, in an aside, he mentioned a table sorting widget he had written. It sounded cool. When I got home I fired up the browser and found it: sorttable.js.

Even though it's over two years old and doubtless there are a bazillion Ajax (tm) toolkits that include supersets of this functionality, I find it to be a very elegant thing. Largely that's because of its utterly configuration-free operation. As long has you've put <th> headers on your table, you just include the script in your page, and set class="sortable" and a unique id on each of your table(s); clicking on a table header re-sorts the table by that column, without any action on the server side at all.

It took me about two minutes to use sorttable.js to add instant sorting to my (possibly-never-to-be-released) "CRUDLite" content management system. Thanks, Stuart!

Monday, February 20th, 2006
ajax + design + javascript
9 comments

Some related posts: Meta-roundup of Javascript libraries • Baby steps with Ajax • The MySpace worm

• Comment from Stuart Langridge, later that day

No problem. Glad you like it :)

• Comment from Rodrigo Perez, 1 week later

Having a hardtime trying to sort dates in the following format: 3/2/2006 11:42:59 AM , 3/2/2006 04:20:05 PM , 3/2/2006 03:21:31 PM. Some are not ordered right, will investigate

• Comment from Paul, 1 week later

The docs have this to say:

(Note that the date function is keyed towards UK format dates (dd/mm/[cc]yy) and will need poking for dates in other formats.)

• Comment from Shay, 3 weeks later

Just found sortable.js, so easy to setup and use. Thanks Stuart!!

• Comment from Cherise ~^..^~, 12 months later

I'm trying to get sorttable set up on my website, but it's not working. I'm not sure if I'm installing everything correctly. Can someone help me?

I've put the .js file in the same folder where I have my html pages.

This is my code:

<html>
   <head>
      <title>
         ~^..^~ ebontigress.com
      </title>
      <meta name="GENERATOR" content="Arachnophilia 5.2">
      <meta name="FORMATTER" content="Arachnophilia 5.2">
      <link rel="stylesheet" type="text/css" href="./ebonstyles.css"/>
<script type="text/javascript" src="sorttable.js"></script>

<style type="text/css">
/* Sortable tables */
table.sortable a.sortheader {
    background-color:#eee;
    color:#666666;
    font-weight: bold;
    text-decoration: none;
    display: block;
}
table.sortable span.sortarrow {
    color: black;
    text-decoration: none;
}
</style>
   </head>

   <body>



<table class="sorttable" id="pgrmbkSpecial" width="100%" border="2" cellspacing="1" cellpadding="2">
<tr>
<th>Rcvd</th>
<th>Guest</th>
<th>Handle</th>
<th>Co./Firm</th>
<th>Award</th>
<th>Bio</th>
<th>Pic (300 dpi res)</th>
</tr>

<tr>
<td>12 Feb</td>
<td>Robin D. Laws</td>
<td>nil</td>
<td>Freelance</td>
<td>Innovation in the Gaming Industry</td>
<td>rcvd</td>
<td>rcvd</td>
</tr>

<tr>
<td>15 Feb</td>
<td>Jamie Chambers</td>
<td>nil</td>
<td>Margaret Weiss Productions</td>
<td>Media Adaptation in Gaming</td>
<td>rcvd</td>
<td>rcvd</td>
</tr>

<tr>
<td>remit ASAP.  Lft vm w/ Jamie 15 Feb.</td>
<td>Renae Chambers</td>
<td>HANDLE</td>
<td>Margaret Weiss Productions</td>
<td>nil</td>
<td>remit ASAP</td>
<td>remit ASAP</td>
</tr>

<tr>
<td>15 Feb</td>
<td>Randall N. Bills</td>
<td>HANDLE</td>
<td>FanPro/BattleTech</td>
<td>nil</td>
<td>rcvd</td>
<td>rcvd</td>
</tr>

<tr>
<td>15 Feb</td>
<td>Tara S. Bills</td>
<td>HANDLE</td>
<td>FanPro/BattleTech</td>
<td>nil</td>
<td>rcvd</td>
<td>rcvd</td>
</tr>

<tr>
<td>remit ASAP.  email read 14 Feb.</td>
<td>Mike Pondsmith</td>
<td>maxmike!!</td>
<td>R. Talsorian</td>
<td>nil</td>
<td>use last year's or update?</td>
<td>use last year's or update?</td>
</tr>

<tr>
<td>remit ASAP.  Lft vm + txt 15 Feb. Pending</td>
<td>Eric Lang</td>
<td>HANDLE</td>
<td>Fantasy Flight Games</td>
<td>nil</td>
<td>remit ASAP</td>
<td>remit ASAP</td>
</tr>

<tr>
<td>remit ASAP</td>
<td>NAME</td>
<td>HANDLE</td>
<td>FIRM</td>
<td>nil</td>
<td>remit ASAP</td>
<td>remit ASAP</td>
</tr>

</table>



   </body>
</html>

Thank you,

~^..^~ Cherise

• Comment from Paul, 12 months later

Hi Cherise, I've found that the single biggest aid to troubleshooting stuff like this is to use diagnostic tools like Firebug. Even just opening a JS console window can sometimes do the trick. You may find, for example, that the JS isn't loading at all, or that there's some other silent error happening.

• Comment from Jennifer, 14 months later

I've been using sortable.js for years. I've found it very useful!

• Comment from raja, 14 months later

sorttable.js is working fine if I put columns in "th" and values in "td" tags. But its not working if i keep values in <td><input name "value to sort"tag</td> so can anyone suggest how to handle this situation.I have few columns with "td"and only one column with "td" input tag "/td"tag.So sorttable.js is not handling this situation.

Regards Raja

• Comment from Erin, 23 months later

I had the same issue as Raja. After some debugging I determined I was never getting to this section of getInnerText:

switch (node.nodeType) {

case 3:

  if (node.nodeName.toLowerCase() == 'input') {

    return node.value.replace(/^\s+|\s+$/g, '');

  }

So I modified the function to have this:

if (node.nodeName.toLowerCase() == 'input') { return node.value.replace(/^s+|s+$/g, ''); } else if (node.getAttribute("sorttable_customkey") != null) {

Name:
Email:	(Will not be shared)
Url:	(Optional)
Comment:

Search

Feeds

RSS feed

Atom feed

Older Posts

Complete archive

Spam Report

At least 29896 pieces of comment spam killed since January 12th. Thanks are mostly due to Akismet.

E-Scribe News : a programmer’s blog