Simplest Table Sorter with jQuery ~ Web Speaks

Table sorting can be done in two ways: using AJAX call or using simple client side javascript. The first method lacks performance as every time sorting is done, it makes a hit on server and returns the sorted resultset. So it is not recommended in most of the situations. The second method(that I would always recommend) is the intelligent one. It performs the sorting on client side without making any request to the server. So it is fast as well performance oriented.

Here I would like to share the simple table sorting with you using my all time favorite jQuery library. The script is extremely easy to understand without use of any rocket science technique. Still your queries are always welcomed.
Now lets watch it working. Live Demo Download Script

jQuery Code

<script type="text/javascript" src="../jquery.js"></script>
<script language="javascript">
$(document).ready(function()
{
 $('table.sortable tbody tr:odd').addClass('odd');
 $('table.sortable tbody tr:even').addClass('even');

 var alternateRowColors = function($table)
 {
  $('tbody tr:odd', $table).removeClass('even').addClass('odd');
  $('tbody tr:even', $table).removeClass('odd').addClass('even');
 };
 
 $('table.sortable').each(function()
 {
  var $table = $(this);
  alternateRowColors($table);
  $('th', $table).each(function(column)
  {
   if ($(this).is('.alphabetic'))
   {
    $(this).hover(function()
    {
     $(this).addClass('hover');
    }, function(){
     $(this).removeClass('hover');
    }).click(function()
    {
     var sortOrder = $('table.sortable').data('order');
     var rows = $table.find('tbody > tr').get();

     if(sortOrder == 'd' || sortOrder == '')
     {
      $('table.sortable').data('order','a');
      rows.sort(function(a, b)
      {
       var keyA = $(a).children('td').eq(column).text().toUpperCase();
       var keyB = $(b).children('td').eq(column).text().toUpperCase();
 
       if (keyA < keyB)
       {
        return 1;
       }
       if (keyA > keyB)
       {
        return -1;
       }
       return 0;
      });
     }
     else
     {
      $('table.sortable').data('order','d'); 
      rows.sort(function(a, b)
      {
       var keyA = $(a).children('td').eq(column).text().toUpperCase();
       var keyB = $(b).children('td').eq(column).text().toUpperCase();
 
       if (keyA < keyB)
       {
        return -1;
       }
       if (keyA > keyB)
       {
        return 1;
       }
       return 0;
      });
     }

     $.each(rows, function(index, row)
     {
      $table.children('tbody').append(row);
     });
     alternateRowColors($table);
    });
   }
  });
 });
});
</script>

HTML Code

<html>
<head>
<style>
*{font-family:verdana; font-size:12px;}
.alphabetic{background-color:#0033FF; color:#FFFFFF; line-height:25px; cursor:pointer; padding:5px;}
.sortable, .sortable td{padding:5px;}
.odd{background-color:#CCCCCC;}
.even{background-color:#E6E6E6;}
.hover{text-decoration:underline;}
</style>
</head>
<body>
<table class="sortable">
 <thead>
  <tr>
   <th class="alphabetic">S.No.</th>
   <th class="alphabetic">Title</th>
   <th class="alphabetic">Author(s)</th>
   <th class="alphabetic">Publish Date</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1</td>
   <td>A</td>
   <td>X</td>
   <td>Feb 2007</td>
  </tr>
  <tr>
   <td>2</td>
   <td>C</td>
   <td>Z</td>
   <td>Dec 2006</td>
  </tr>
  <tr>
   <td>3</td>
   <td>B</td>
   <td>F</td>
   <td>Jan 2009</td>
  </tr>
  <tr>
   <td>4</td>
   <td>D</td>
   <td>J</td>
   <td>Apr 2010</td>
  </tr>
 </tbody>
</table>
</body>
</html>