Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

Sort Table Using jQuery

Tuesday, Mar 7, 2017

Tags:- jQuery CSS HTML


Table Sorting is a must have feature for your website when you have content displayed in table because user wants to view the table as per there need so you have to make your table sortable for better user experience.In this tutorial we will show you how to sort table using jQuery.You may also like sort MySQL table using PHP.


See Demo
Sort Table Using jQuery


To Sort Table It Takes Only Three Steps:-

  1. Make a HTML file and define markup
  2. Make a js file and define scripting
  3. Make a CSS file and define styling


Step 1.Make a HTML file and define markup

We make a HTML file and save it with a name sort.html

<html>
<head>
 <link href="sort.css"  rel="stylesheet" type="text/css"/>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="sort.js"></script>
</head>
<body>
<div id="wrapper">
<table id="mytable" cellpadding="7" align="center">
 <tr>
  <th onclick="sort_name();">SORT NAME</th>
  <th onclick="sort_age();">SORT AGE</th>
 </tr>
 <tbody id="table1">
 <tr>
  <td>Aman</td><td>28</td>
 </tr>
 <tr>
  <td>Rahul</td><td>36</td>
 </tr>
 <tr>
  <td>Amit</td><td>21</td>
 </tr>
 <tr>
  <td>Suresh</td><td>34</td>
 </tr>
 <tr>
  <td>Karan</td><td>14</td>
 </tr>
 <tr>
  <td>Pooja</td><td>24</td>
 </tr>
 </tbody>
</table>

<input type="hidden" id="name_order" value="asc">
<input type="hidden" id="age_order" value="asc">
</div>
</body>
</html>

In this step we create a table and add some sample rows to sort.We also add table header and when user clicks on any header table sorting will occur on there respective column and then we create two hidden field to store sorting order of both the columns.You may also like expand table rows using jQuery.



Step 2.Make a js file and define scripting

We make a js file and save it with a name sort.js

function sort_name()
{
 var table=$('#mytable');
 var tbody =$('#table1');

 tbody.find('tr').sort(function(a, b) 
 {
  if($('#name_order').val()=='asc') 
  {
   return $('td:first', a).text().localeCompare($('td:first', b).text());
  }
  else 
  {
   return $('td:first', b).text().localeCompare($('td:first', a).text());
  }
		
 }).appendTo(tbody);
	
 var sort_order=$('#name_order').val();
 if(sort_order=="asc")
 {
  document.getElementById("name_order").value="desc";
 }
 if(sort_order=="desc")
 {
  document.getElementById("name_order").value="asc";
 }
}

function sort_age() 
{
 var table=$('#mytable');
 var tbody =$('#table1');

 tbody.find('tr').sort(function(a, b) 
 {
  if($('#age_order').val()=='asc') 
  {
   return $('td:last', a).text().localeCompare($('td:last', b).text());
  }
  else 
  {
   return $('td:last', b).text().localeCompare($('td:last', a).text());
  }
		
 }).appendTo(tbody);
	
 var sort_order=$('#age_order').val();
 if(sort_order=="asc")
 {
  document.getElementById("age_order").value="desc";
 }
 if(sort_order=="desc")
 {
  document.getElementById("age_order").value="asc";
 }
}

In this tutorial we create two functions one is used to sort name and other is used to sort age. In sort_name() function we first get table and tbody then we use jQuery sort() function to sort name alphabetically by comparing 1st row 1st column to the 2nd row 1st column and then append the sorted row to tbody.Then we change the sorting order if the order is 'asc' then change it to 'desc' and vice versa for table sorting.You may also like show hide table column javascript.

In sort_age() function we use same method just like sort_name() function but in place of td:first we use td:last because age is last column of the table and we get the age_order value to check and change age_order.You may also like pricing table using HTML and CSS.



Step 3.Make a CSS file and define styling

We make a CSS file and save it with a name sort.css

body
{
 text-align:center;
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
 background-color:#B45F04;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:995px;
}
#mytable
{
 text-align:center;
}
#mytable th
{
 color:white;
 font-size:18px;
 cursor:pointer;
}
#mytable td
{
 color:white;
 font-size:17px;
 border:1px solid;
}

Thats all, this is how to sort table using jQuery.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email

Are You Starting A New Blog
Do You Want Best Web Hosting?

Try World's Best Web Hosting Provider BlueHost
At Just $3.95/mo

Hurry Up! Limited Time Offer

Yes, I Want To Check Out BlueHost

Check The World's Best SEO And All-In-One Marketing Toolkit
For Digital Marketing Professionals SEMRUSH

Check Out SEMRUSH