Simplest Table Sorter with jQuery

4

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>

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/

4 thoughts on “Simplest Table Sorter with jQuery”

  2. Hi! I just noticed that the date doesnt sort by date.. its being sorted alphabetically. How do i make this sort by date? Thanks.

Comments are closed.