blogs

blogs

06.182015
0 0
Table Sorting in HTML

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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js" type="text/JavaScript"> 
   </script>
   <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">  
      <thead>  
            <tr>  
                  <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>  
           </tr>  
     </thead>  
     <tbody>  
       <tr>  
            <td>1</td> 
           <td>John</td>  
           <td>jsmith@gmail.com</td>  
            <td>195</td>  
     </tr>  
     <tr>  
            <td>6</td> 
            <td>Frank</td>  
            <td>fbach@yahoo.com</td>  
            <td>107</td>  
      </tr>  
     <tr>  
            <td>4</td> 
            <td>Andy</td>  
            <td>andy@rediff.com</td>  
            <td>290</td>  
     </tr>    
     </tbody>    
 </table>

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">
   $(document).ready(function()  
         {  
                $("#Table").tablesorter();  
 /* 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]); 
                        } 
                  } 
            }); 
        }); 
  </script>

Leave a Reply

Your email address will not be published. Required fields are marked *