Sort tables with sorttable.js

February 20, 2006

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!

Stuart Langridge commented on Tue Feb 21 03:55:10 2006:

No problem. Glad you like it :)

Rodrigo Perez commented on Thu Mar 2 17:35:25 2006:

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

Paul commented on Thu Mar 2 17:45:12 2006:

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

Shay commented on Tue Mar 14 13:16:19 2006:

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

Cherise ~~^..^~~ commented on Thu Mar 1 06:23:16 2007:

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

Paul commented on Fri Mar 2 12:28:53 2007:

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.

Jennifer commented on Tue Apr 24 16:57:20 2007:

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

raja commented on Tue May 8 21:10:24 2007:

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

Erin commented :

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) {

Mari commented :

The error is class=“sorttable” the correct is class=“sortable”. Only one “t”

Hugo Pineda commented :

Hi, I’m trying to sort a table generated by Ajax using prototype, it seems the class=“sortable” has the initial document scope, so the loaded “sortable” table is ignored by the script.

Any ideas how to make the ajax generated table “sortable”

Thanks.

PS. I bought your django book, it’s great, good job!

Hugo Pineda commented :

SOLVED: in the code returned by ajax if I put this script then the table becomes sortable:

Where ‘ajax_table’ is the id of the ajax returned table.

Cheers!

Hugo Pineda commented :

the code dissapears from the prev. post: here is again without the scrip tag:

sorttable.makeSortable($(‘ajax_table’));

DAn commented :

jquery has a similar script. the docs are very clean, while configuration is a bit more versatile and easy to globalize/scale with one-off meta-data when needed.

http://tablesorter.com/docs/index.html

sagar commented :

hi can we use the same in display table as well

SK commented :

Hi,

I am generating the table from AJAX script and trying to sort it. But I am not able to do so. Can you please help me?

Find enclosed my code that is called by AJAX.

0 && mysql_num_rows($res2)>0) { $fvalue = mysql_query("SELECT MDvalue FROM mdnumbers WHERE MMM_DD = '$from'"); $fromvalue1= mysql_result($fvalue, 0); $tvalue = mysql_query("SELECT MDvalue FROM mdnumbers WHERE MMM_DD = '$to'"); $tovalue1= mysql_result($tvalue, 0); $result = mysql_query("SELECT * FROM annotations WHERE DayOfYear BETWEEN $fromvalue1 AND $tovalue1 ORDER BY DayOfYear"); if (mysql_num_rows($result)>0) { echo '' . "\n"; echo ''; echo ''; echo ''; echo''; echo '' . "\n"; echo ''; echo ''; echo ''; echo ''; echo ''; echo ''; echo ''; echo ''; while($row = mysql_fetch_array($result)) { echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; } echo "

Day	Year	Category	Annotation	Link
".$row['MMM_DD']."	".$row['Year']."	".$row['Category']."	".$row['Annotation'] ."	" .$row['Link']. "

"; echo "\n"; echo "\n"; } else { echo "No Annotations to display for the selected period"; } } else { echo "Please enter FROM and TO values in proper format. Examples: Jan-23, Nov-14, Sep-15."; } mysql_close($db); ?>

aman commented :

it do not work even by including

selva commented :

It’s not working for table with column contains text box.

for type hidden also it’s failing.

Fred for this it will work.