Good Morning,
Today we discuss one different topic related to Sorting HTML table using jQuery Table Sorter plugin. I got a request from one of my reader about how to sort table data based on columns.
Their are two types of sorting are available. They are:
- Server Side
- Client Side
In here,the client side sorting are used for sorting table columns using table sorter. This technique is developed in a responsive bootstrap table.
Page Structure
- HTML
- CSS
- jQuery
The HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<div id="mhead"> <h2>Sorting HTML table using jQuery </h2> </div> <table id="tbl" cellspacing="0" cellpadding="0"> <thead> <tr> <th class="header"><span>Language</span></th> <th class="header"><span>Proficiency</span></th> <th class="header"><span>Mark</span></th> </tr> </thead> <tbody> <tr> <td>English</td> <td>Advance</td> <td>4</td> </tr> <tr> <td>Malayalam</td> <td>Expert</td> <td>4</td> </tr> <tr> <td>Hindi</td> <td>Advance</td> <td>3</td> </tr> <tr> <td>Tamil</td> <td>Advance</td> <td>5</td> </tr> <tr> <td>Kannada</td> <td>Advance</td> <td>5</td> </tr> <tr> <td>Spanish</td> <td>Intermediate</td> <td>1</td> </tr> </tbody> </table> |
The CSS
In here, using responsive table structure is used for performing this operations.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<style> table, th, td { border: 1px solid black; } table { border-collapse:collapse; } table,th, td { border: 1px solid black; } td { padding:15px; } table { width:100%; } th { height:50px; } table, td, th { border:1px solid green; } th { background-color:green; color:white; } #tbl thead tr th.headerSortUp span { background-image: url('up-arrow.png'); background-repeat:no-repeat; } #tbl thead tr th.headerSortDown span { background-image: url('down-arrow.png'); background-repeat:no-repeat; } #tbl thead tr th{ cursor: pointer;} #tbl thead tr th span { padding-right: 20px; background-repeat: no-repeat; background-position: 100% 100%; } #mhead{ min-height: 20px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); text-align: center; } #myad{ width: 728px; position: relative; margin : auto; } </style> |
The jQuery
For sorting table content first include table_sort plugin into our web page.
1 2 3 4 5 6 7 8 |
<script src="my_script.js"></script> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript" src="table_sort.min.js"></script> <script type="text/javascript"> $(function(){ $('#tbl').tablesorter(); }); </script> |
The tablesorter helps you to dynamically sort the information.
If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.