Sort HTML table from JQuery

Thu Jan 10, 2013 3:18 pm

Allow user to Sort HTML table using JQuery when click on table headers:
javascript code

<html>
<head>
<title>Sort table using JQuery</title>
 
<!--
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
 Note you can download the JQuery package instead of using Google version. --> 
<script src="jquery-1.8.3.js"></script>
<script type='text/javascript' src='jquery-latest.js'></script>
<script type='text/javascript' src='jquery.tablesorter.js'></script>


<script>
$(document).ready(function() 
    { 
        $("#studentsTable").tablesorter(); 
    } 
); 
</script>

</head>
<body>
	<table id="studentsTable" class="tablesorter" border="1px"> 
<thead> 
<tr> 
    <th>ID</th> 
    <th>Student Name</th> 
    <th>Department</th> 
    <th>Class</th> 
    <th>GPA</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>323</td> 
    <td>Smith</td> 
    <td>Computer Science</td> 
    <td>A1</td> 
    <td>3.4</td> 
</tr> 
<tr> 
    <td>345</td> 
    <td>Johan</td> 
    <td>Computer Science</td> 
    <td>A1</td> 
    <td>2.7</td> 
</tr> 
<tr> 
    <td>21</td> 
    <td>Ali</td> 
    <td>Electric Engineering</td> 
    <td>EE4</td> 
    <td>3.0</td> 
</tr> 
<tr> 
    <td>33</td> 
    <td>Tonson</td> 
    <td>Electric Engineering</td> 
    <td>EE4</td> 
    <td>3.2</td> 
</tr> 
</tbody> 
</table> 
    
</body>
</html>

To disable sorting feature for a specific table columns , you can assign the index of column starting from 0 to tablesorter function.
javascript code

<script>
$(document).ready(function() 
    { 
        $("#studentsTable").tablesorter({
		headers: {2: {sorter: false},4: {sorter: false} 
        } 
    });  
    } 
); 
</script>

To set the initial sort, for example fourth column and in ascending order.
javascript code

<script>
$(document).ready(function() 
    { 
       $("#studentsTable").tablesorter({ 
        //   fourth column and i ascending order. 
         sortList: [[3,1]] 
    }); 
    } 
); 
</script>

To run this code you need to have additional packages :
javascript code

<script type='text/javascript' src='jquery-latest.js'></script>
<script type='text/javascript' src='jquery.tablesorter.js'></script>

Download from here

jquery-latest.js: (70.63 KiB) Downloaded 1068 times

jquery.tablesorter.js: (39.96 KiB) Downloaded 992 times

Or visit the original web page :

Code:: http://tablesorter.com

Sort HTML table from JQuery

Sort HTML table from JQuery

Topic Tags