In this article we discuss about 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.

Sort Table Using jQuery

Sort Table Using jQuery

HTML

<html>
<head>
 <link href="sort.css"  rel="stylesheet" type="text/css"/>
 <script type="text/javascript" src="jquery.min.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>

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.

Add to Custom JavaScript in your project

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";
 }
}

we create two functions one is used to sort name and the other is used to sort age. In sort_name() function, we first get table and tbody then we use the jQuery sort() function to sort the name alphabetically by comparing the 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 the sort_age() function we use the same method just like sort_name() function but in place of td:first we use td:last because age is the last column of the table and we get the age_order value to check and change age_order.

if you want Add to Custom CSS in your project

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;
}

Output

Sort Table Using jQuery

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

Also Check out: is there any input date format mm-dd-yyyy change to dd-mm-yyyy?

If you interested in Entertainment genre please check this alsothebiographys.com

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *