Sorting HTML table using jQuery Table Sorter plugin

In my one of previous post about inline editing of HTML table, I got request from one of my reader about how to sort table data based on columns. There are two types of sorting one is client side and another is server side. In this post we will be implementing client side sorting using a wonderful and easy to use plugin table sorter. There are various complex and more advanced plugins like jqgrid which allows you to sort table data based on column, but these complex plugins offers you more than that. They offer pagination, editing content of table etc.

sorting table

                                                   Live Demo

Our goal is to just provide client side table data sorting so we will use table sorter jQuery plugin. All you need to do is to include table sorter jquery plugin in your code and call the table sorter function. Below is the two line code which lets you do this.

</p>
<p style="text-align: justify;">$(function(){
 $('#tbl').tablesorter();
});</p>
<p style="text-align: justify;">

below is our table’s code:

</p>
<table id="tbl" cellspacing="0" cellpadding="0">
 <thead>
 <tr>
 <th><span>Skill</span></th>
 <th><span>Proficiency</span></th>
 <th><span>Experience in years</span></th>
 <th><span>No. of Projects done</span></th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td >PHP</td>
 <td>Advance</td>
 <td>4</td>
 <td>10</td>
 </tr>
 <tr>
 <td >WordPress</td>
 <td>Expert</td>
 <td>4</td>
 <td>4</td>
 </tr>
</table>
<p style="text-align: justify;">

yes that’s it, rest is taken care by plugin’s code. You can sort strings, numbers, date data type with this plugin. To read more I recommend you to have a look at official table sorter plugin’s page. Share this post to help your fellow developers.

1 thought on “Sorting HTML table using jQuery Table Sorter plugin”

  1. Hello Bro,
    I tried up this but didn’t got the result.Can you explain me little more.

Comments are closed.