Sort Table Using jQuery

Last Updated : Jul 1, 2023

IN - jQuery CSS HTML | Written & Updated By - Riya

In this tutorial we will show you how to sort table using jQuery, 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.

You may also like sort MySQL table using PHP.

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Sort Table It Takes Only Three Steps:-

Make a HTML file and define markup
Make a js file and define scripting
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.

I hope this tutorial on sort table using jQuery helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →

About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪