✖

All TalkersCode Topics

Follow TalkersCode On Social Media

Sort Table Using jQuery

Last Updated : Apr 15, 2022

IN - 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.

Sort Table Using jQuery

CHECK OUT THIS TUTORIAL LIVE DEMO →

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.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Latest Tutorials