Table Sorting in HTML

In this Blog we will learn how can we sort the column having numeric value in Descending order & column having Alphabetical value in Ascending Order on first click of theand then sort the table normally.

To achieve this we will use tablesorter plugin, tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refresh.

To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside thetag of your HTML document:

  <script src="" type="text/JavaScript"> 
   <script src="jquery.tablesorter.js"></script>


Here is a HTML code for the Table:

Inthere are some attribute,
1. index :- this represent the index value of column
2. type :- this represents the order of sorting. if type is “0” then it sorts in Ascending order & if type is “1” then it sort in Descending order

 <table id="Table" class="tablesorter">  
                  <th class="tHeader" index="0" type="1" count="0">Position</th> 
                  <th class="tHeader" index="1" type="0" count="0">First Name</th>  
                  <th class="tHeader" index="2" type="0" count="0">Email</th>  
                  <th class="tHeader" index="3" type="1" count="0">Point</th>  


Here is the Script to use the Table sorter:

We declare two values to variable sorting
1. _colindex : which specifies the column index of clicked Header
2. _type : which specifies the type of that column.(type of sorting to be done)


  <script type="text/JavaScript">
 /* we call the tablesorter function on id because idattribute specifies a unique id for an 
   HTML element */ 
            $("#Table tr .tHeader").on("click",function(){ 
                  var _colindex        =     $( this ).attr("index"); 
                  var _type           =     $( this ).attr("type"); 
                  if( _type == 1 ) 
                        var _count    =     $( this ).attr("count"); 
                        if( _count == 0 ){ 
                             _count+    =     1; 
                              $( this ).attr( "count" , _count ); 
                              var sort =     [[_colindex,_type]]; 
                              $( "table" ).trigger("sorton",[sort]); 

Leave a comment