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 <head> tag of your html page.

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

 

3. Prepare dummy HTML table

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

 

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.

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

 

5. Full HTML Code

File : demo.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
Madhu 32 F Delhi Jan 10, 2011 169.254.23.23
John 27 M Banglore Mar 17, 2010 169.254.77.89
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 Source Code

 

References