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.
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.
Latest Tutorials
- Create Animated Skill Bar Using jQuery, HTML And CSS
- Simple And Best Responsive Web Design Using CSS Part 2
- Show Button On Hover Using HTML And CSS
- Material Design Login Form Using jQuery And CSS
- Animated Progress Bar Using jQuery And CSS
- Dynamic Drop Down Menu Using jQuery, Ajax, PHP And MySQL
- Get Website Statistics Using PHP, jQuery And MySQL
- HTML5 Login And Signup Form With Animation Using jQuery
- Facebook Style Homepage Design Using HTML And CSS
- View Webpage In Fullscreen Using jQuery