Next Prev

Table Sort

At a glance...

- Plays nicely with the JavaScript global namespace (the script creates and reuses only one JavaScript object)
- The new script sorts (on average - based on my very non-scientific calculations), 5 times faster than its predecessor
- The plug-in architecture makes writing custom sort functions a breeze
- The script can now highlight both alternate rows and full columns on a table by table basis.
- Like its predecessor, the script is fully keyboard accessible
- The script can correctly determine a columns datatype should a datatype not be explicitly defined
- The script is smart enough not to sort columns containing identical data
- Sort routines can now be initiated using JavaScript
- Tables can be automatically sorted on a column of your choice
- Before-sort and after-sort callback functions can now be defined for individual tables
- The script can now "reverse sort" onload (thanks to Parag)

Web 2.0 Box Generator

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!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>
<base href="http://www.ajaxdaddy.com/web20/table-sort/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
  <title>frequency decoder ~ table sort (revisited) demo</title>
  <link href="css/demo.css" rel="stylesheet" type="text/css">
</head>
<body>
  
<h1>TableSort (revisited) demo</h1>
<h2>50 row table test</h2>

<table id="test1" class="sortable-onload-3-reverse rowstyle-alt no-arrow" border="0" cellpadding="0" cellspacing="0">
  <caption>The Numbers Weekly World Chart (2007-03-08)</caption>
  <thead>
    <tr>
      <th style="-moz-user-select: none;" class="sortable-keep fd-column-0"><a title="Sort on “Rank”" href="#">Rank</a></th>
      <th style="-moz-user-select: none;" class="sortable-numeric fd-column-1"><a title="Sort on “Prev.Rank”" href="#">Prev.Rank</a></th>
      <th style="-moz-user-select: none;" class="fd-column-2 sortable-text reverseSort"><a title="Sort on “Movie”" href="#">Movie</a></th>
      <th style="-moz-user-select: none;" class="sortable-date-dmy fd-column-3"><a title="Sort on “Release Date”" href="#">Release Date</a></th>
      <th style="-moz-user-select: none;" class="sortable-currency fd-column-4"><a title="Sort on “Weekly Gross”" href="#">Weekly Gross</a></th>
      <th style="-moz-user-select: none;" class="sortable-numeric fd-column-5"><a title="Sort on “Change”" href="#">Change</a></th>
      <th style="-moz-user-select: none;" class="sortable-numeric fd-column-6"><a title="Sort on “Theaters”" href="#">Theaters</a></th>
      <th style="-moz-user-select: none;" class="sortable-currency fd-column-7"><a title="Sort on “Per Theater”" href="#">Per Theater</a></th>
      <th style="-moz-user-select: none;" class="sortable-currency fd-column-8"><a title="Sort on “Gross”" href="#">Gross</a></th>
    </tr>
  </thead>
  <tbody>

  <tr class="">
      <td>3</td>
      <td>&nbsp;</td>
      <td class="lft"><a href="http://www.the-numbers.com/movies/2007/ZODIC.php">Zodiac</a></td>
      <td>13/01/2007</td>
      <td>$16,954,103</td>
      <td>n/a</td>
      <td>2,362</td>
      <td>$7,178</td>
      <td>$16,954,103</td>
    </tr><tr class="alt">
      <td>1</td>
      <td>&nbsp;</td>
      <td class="lft"><a href="http://www.the-numbers.com/movies/2007/WHOGS.php">Wild Hogs</a></td>
      <td>03/01/2007</td>
      <td>$49,415,325</td>
      <td>n/a</td>
      <td>3,287</td>
      <td>$15,034</td>
      <td>$49,415,325</td>
    </tr><tr class="">
      <td>11</td>
      <td>(8)</td>
      <td class="lft"><a href="http://www.the-numbers.com/movies/2007/0LVER.php">Vie En Rose, La</a></td>
      <td>01/01/2007</td>
      <td>$7,924,281</td>
      <td>-35.42%</td>
      <td>990</td>
      <td>$8,004</td>
      <td>$33,174,085</td>
    </tr><tr class="alt">
      <td>36</td>
      <td>&nbsp;</td>
      <td class="lft"><a href="http://www.the-numbers.com/movies/2007/0TT07.php">Testosteron (Poland, 2007)</a></td>
      <td>03/01/2007</td>
      <td>$2,263,584</td>
      <td>n/a</td>
      <td>125</td>
      <td>$18,109</td>
      <td>$2,263,584</td>
    </tr><tr class="">
      <td>14</td>
      <td>(10)</td>
      <td class="lft"><a href="http://www.the-numbers.com/movies/2007/0TXI4.php">Taxi 4</a></td>
      <td>23/02/2007</td>
      <td>$5,702,926</td>
      <td>-43.84%</td>
      <td>911</td>
      <td>$6,260</td>
      <td>$33,004,025</td>
    </tr><tr class="alt">
      <td>37</td>
      <td>&nbsp;</td>
      <td class="lft"><a href="http://www.the-numbers.com/movies/2007/SMKAC.php">Smokin' Aces</a></td>
      <td>03/01/2007</td>
      <td>$2,235,926</td>
      <td>-45.17%</td>
      <td>748</td>
      <td>$2,989</td>
      <td>$50,418,107</td>
    </tr><tr class="">
      <td>46</td>
      <td>(35)</td>
      <td class="lft"><a href="http://www.the-numbers.com/movies/2007/0SLGO.php">Sluga Gosudarev</a></td>
      <td>03/01/2007</td>
      <td>$1,427,817</td>
      <td>-55.61%</td>
      <td>434</td>
      <td>$3,290</td>
      <td>$4,644,682</td>
    </tr><tr class="alt">
      <td>33</td>
      <td>(27)</td>
      <td class="lft"><a href="http://www.the-numbers.com/movies/2007/0SACO.php">Saturno Contro</a></td>
      <td>03/01/2007</td>
      <td>$2,659,611</td>
      <td>-41.78%</td>
      <td>399</td>
      <td>$6,666</td>
      <td>$7,228,110</td>
    </tr></tbody>
  <tfoot>
    <tr>
      <td class="total" colspan="8">Cumulative Total:</td>
      <td>$2,982,563,398</td>
    </tr>
  </tfoot>
</table>
<script type="text/javascript" src="javascript/tablesort.js"></script>
</body></html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Fern

2009-06-20 00:19:34

hi..i'm having a problem in sorting..i didn't find other sorttable script to 'not to sort null values/blank cell'...i mean i want rows with null values to always stay at the table bottom when sorted... thanks for the great script..

Fern

2009-06-19 02:05:14

nice script..:-)...but it would be better if null values should always stay on the table bottom when sorted...

Edo_infokom@yahoo.com

2009-01-02 03:50:51

that's was great

Dan

2008-11-25 07:48:51

Rank column is set to sortable-keep. I didn't look into the javascript but i think the example works as intended (it keeps the rank)

Captain Obvious

2008-11-21 11:28:41

Oh, by the way, Sort by rank isn't working!

Goege

2008-11-20 17:15:29

I love this sortable table script. Thank you very much.

Ryan Couser

2008-09-19 08:35:53

Rank column will work correctly if you change the to numeric like so class="sortable-numeric fd-column-0">

Adriaan Nel

2008-09-01 12:26:06

The rank column doesn't sort correctly, I get it in this order: 3,1,11,36,14,37,46,33 It's really really bad if the provided demo doesn't work as expected...

Vish

2008-07-17 12:50:57

Thanks for woderful script

Óskar

2008-01-25 09:28:24

This is a great script :) Only I have a question about non-english characters, is there a way to enable unicode or whatever it is called :)

Marauder

2008-01-04 07:01:35

sort by rank doesnt work

Boxer Dog Sale

2007-10-06 00:27:10

I have just found an interesting forum on this theme

2007-09-15 06:27:08

Hi, TableSort looks really good. Is there a way of re-ranking each row after sorting using another column, Like Table Organize does?

Orxkfggyzz

2007-06-18 22:34:15

Hello! Good Site! Thanks you! drdrqngnqdrt

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Table Sort

Comment on this example