Total members 11786 |It is currently Mon Jul 22, 2019 6:46 am Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka





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
Attachment:
jquery-latest.js [70.63 KiB]
Downloaded 572 times

Attachment:
jquery.tablesorter.js [39.96 KiB]
Downloaded 563 times

Or visit the original web page :
Code:
http://tablesorter.com





Author:
Mastermind
User avatar Posts: 2707
Have thanks: 74 time
Post new topic Reply to topic  [ 1 post ] 

  Related Posts  to : Sort HTML table from JQuery
 Add new row dynamically to table using JQuery     -  
 add pagination to html page using JQuery     -  
 Get the position of HTML element using JQuery     -  
 HTML Scrollable table     -  
 get HTML elements attributes values using JQuery     -  
 HTML Table Of Contents Generator     -  
 adding caption to table in html     -  
 Use for loop to output HTML table     -  
 checking if a HTML element is visible or hidden under JQuery     -  
 Show hint when focus on html element using JQuery     -  



Topic Tags

JQuery Table






Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com