Sorting Table using jQuery

It's a very easy to sort your table using this function. You need only one extra attribute [wt-sorting-table] in your table tag, and copy the JS function to embed in your project in JS file.

by Aqeel Malik

HTML

<!--
Company : Webicosoft.com
Name    : Aqeel Malik (Web Developer)
Email   : [email protected]
Mobile  : +92 302 6262164
Skills  : xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | AngularJS | Jekyll | PHP+MySQL | Photoshop | Firework | Dreamweaver
-->
<table wt-sorting-table>
   <thead>
      <tr>
         <th>#</th>
         <th>Name</th>
         <th>Action</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>Ronaldo</td>
         <td>Edit</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Messi</td>
         <td>Edit</td>
      </tr>
      <tr>
         <td>3</td>
         <td>Ribery</td>
         <td>Edit</td>
      </tr>
      <tr>
         <td>20</td>
         <td>Bale</td>
         <td>Edit</td>
      </tr>
   </tbody>
</table>
<br/>
<table wt-sorting-table>
   <thead>
      <tr>
         <th>S.L.</th>
         <th>name</th>
         <th>Action</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>Ronaldo</td>
         <td>Edit</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Messi</td>
         <td>Edit</td>
      </tr>
      <tr>
         <td>3</td>
         <td>Ribery</td>
         <td>Edit</td>
      </tr>
      <tr>
         <td>20</td>
         <td>Bale</td>
         <td>Edit</td>
      </tr>
   </tbody>
</table>

CSS

/*
Company : Webicosoft.com
Name    : Aqeel Malik (Web Developer)
Email   : [email protected]
Mobile  : +92 302 6262164
Skills  : xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | AngularJS | Jekyll | PHP+MySQL | Photoshop | Firework | Dreamweaver
*/
table {width:70%}
table,th,td{border:1px solid black}
th:hover{cursor:pointer;background:gray}

JavaScript

/*
Company : Webicosoft.com
Name    : Aqeel Malik (Web Developer)
Email   : [email protected]
Mobile  : +92 302 6262164
Skills  : xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | AngularJS | Jekyll | PHP+MySQL | Photoshop | Firework | Dreamweaver
*/
$(document).ready(function() {
	$.fn.WT_SORTING_TABLE = function(order, index, $table) {
		var $rows = $table.find('tbody').find('tr').get();

		$rows.sort(function(a, b) {
			var A = get(a), B = get(b);
			if(A < B) {return -1*order;} else {return 1*order;}
			return 0;
		});

		function get(elm){
			var v = $(elm).children('td').eq(index).text().toUpperCase();
			if($.isNumeric(v)){v = parseInt(v,10);} return v;
		}

		$.each($rows, function(index, row) {
			$table.children('tbody').append(row);
		});
	};
	var sortOrder = 1;
	$(document).on('click', 'th:not(:last-child)', function() {
		sortOrder *= -1;
		var length = $(this).prevAll().length;
		var $table = $(this).parents('[wt-sorting-table]');
		$.fn.WT_SORTING_TABLE(sortOrder, length, $table);
	});
});