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)

Visit PhpDaddy.com

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

Ó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