This post describes how to make an HTML table (having THEAD and TBODY) sortable in few minutes using tablesorter jQuery plugin. This plugin can parse and sort many types of data like number, text, currency, URI, IP address, date, time including linked data in a table cell.

Tools and Technologies used in this article

  1. jQuery
  2. tablesorter jQuery plugin

1. Download jQuery library and tablesorter plugin

Download jQuery library and tablesorter plugin

2. Include jQuery and tablesorter plugin

Include jQuery and tablesorter plugin Javascript file inside tag of your html page.

<html>
<head>
    <title>Demo Html</title>
    <script type="text/javascript" src="jquery.min.js"></script> 
    <script type="text/javascript" src="jquery.tablesorter.min.js"></script>
</head>
<body>
     <!-- body here -->
</body>
</html>

Alternatively, you can also include js files available in different CDN networks like Google CDN, Microsoft CDN, cdnjs.com etc.

<html>
<head>
    <title>Demo Html</title>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.9.1/jquery.tablesorter.min.js"></script>
</head>
<body>
     <!-- body here -->
</body>
</html>

3. Prepare dummy HTML table

Prepare a dummy HTML table for testing purpose. This sortable table must have THEAD and TBODY tag.

<table id="myDummyTable" class="tablesorter">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>      
      <th>Sex</th>
      <th>City</th>
      <th>Joining Date</th>
      <th>PC IP</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jadu</td>
      <td>24</td>
      <td>M</td>
      <td>Kolkata</td>
      <td>Feb 28, 2012</td>
      <td>169.254.23.75</td>
    </tr>
    <tr>
      <td>Madhu</td>
      <td>32</td>
      <td>F</td>
      <td>Delhi</td>
      <td>Jan 10, 2011</td>
      <td>169.254.23.23</td>
    </tr>
    <tr>
      <td>John</td>
      <td>27</td>
      <td>M</td>
      <td>Banglore</td>
      <td>Mar 17, 2010</td>
      <td>169.254.77.89</td>
    </tr>
    <tr>
      <td>Rahim</td>
      <td>43</td>
      <td>M</td>
      <td>Noida</td>
      <td>Dec 29, 2009</td>
      <td>169.254.85.88</td>
    </tr>
    <tr>
      <td>Rita</td>
      <td>37</td>
      <td>F</td>
      <td>Hydrabad</td>
      <td>Aug 16, 2011</td>
      <td>169.254.65.19</td>
    </tr>
    <tr>
      <td>Washim</td>
      <td>24</td>
      <td>M</td>
      <td>Mumbai</td>
      <td>Sep 29, 2012</td>
      <td>169.254.28.92</td>
    </tr>
   </tbody>
</table>

4. Make Table sortable

Add the below script to make your dummy table sortable by table sorter plugin after document is loaded in the browser.

$(function(){
  $("#myDummyTable").tablesorter();
});

Note: 'myDummyTable' is the id of the html table.

5. Full HTML Code

File: demo.html

<!doctype html>
<html>
<head>
    <title>Demo Html</title>
    <link href="http://mottie.github.io/tablesorter/css/theme.default.css" rel="stylesheet">
     
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.9.1/jquery.tablesorter.min.js"></script>
     
    <script>
        $(function(){
          $("#myDummyTable").tablesorter({widgets: ['zebra']});
        });
    </script>
</head>
<body>
     <table id="myDummyTable" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>      
          <th>Sex</th>
          <th>City</th>
          <th>Joining Date</th>
          <th>Computer IP</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Jadu</td>
          <td>24</td>
          <td>M</td>
          <td>Kolkata</td>
          <td>Feb 28, 2012</td>
          <td>169.254.23.75</td>
        </tr>
        <tr>
          <td>Madhu</td>
          <td>32</td>
          <td>F</td>
          <td>Delhi</td>
          <td>Jan 10, 2011</td>
          <td>169.254.23.23</td>
        </tr>
        <tr>
          <td>John</td>
          <td>27</td>
          <td>M</td>
          <td>Banglore</td>
          <td>Mar 17, 2010</td>
          <td>169.254.77.89</td>
        </tr>
        <tr>
          <td>Rahim</td>
          <td>43</td>
          <td>M</td>
          <td>Noida</td>
          <td>Dec 29, 2009</td>
          <td>169.254.85.88</td>
        </tr>
        <tr>
          <td>Rita</td>
          <td>37</td>
          <td>F</td>
          <td>Hydrabad</td>
          <td>Aug 16, 2011</td>
          <td>169.254.65.19</td>
        </tr>
        <tr>
          <td>Washim</td>
          <td>24</td>
          <td>M</td>
          <td>Mumbai</td>
          <td>Sep 29, 2012</td>
          <td>169.254.28.92</td>
        </tr>
       </tbody>
    </table>
</body>
</html>

Note: We have included 'theme.default.css' to add theme to our dummy sortable table.

6. Live Demo

Name
Age
Sex
City
Joining Date
Computer IP
Jadu 24 M Kolkata Feb 28, 2012 169.254.23.75
John 27 M Banglore Mar 17, 2010 169.254.77.89
Madhu 32 F Delhi Jan 10, 2011 169.254.23.23
Rahim 43 M Noida Dec 29, 2009 169.254.85.88
Rita 37 F Hydrabad Aug 16, 2011 169.254.65.19
Washim 24 M Mumbai Sep 29, 2012 169.254.28.92

Note: For multiple columns sorting, click one column header then hold down the shift key and click other column headers that you want to include in sorting. Now holding the shift key down, you can click already selected column for sorting.

Download SrcCodes

All code samples shown in this post are available in the following link table-sorter-demo.html

References

, Javascript , jQuery , Tablesorter , plugin , HTML , Table , jQuery Tablesorter plugin , classic