In this Blog we will learn how can we sort the column having numeric value in Descending order & column having Alphabetical value in Ascending Order on first click of theand then sort the table normally.
To achieve this we will use tablesorter plugin, tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refresh.
To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside thetag of your HTML document:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js" type="text/JavaScript"> </script> <script src="jquery.tablesorter.js"></script>
Here is a HTML code for the Table:
Inthere are some attribute,
1. index :- this represent the index value of column
2. type :- this represents the order of sorting. if type is “0” then it sorts in Ascending order & if type is “1” then it sort in Descending order
<table id="Table" class="tablesorter">
<thead>
<tr>
<th class="tHeader" index="0" type="1" count="0">Position</th>
<th class="tHeader" index="1" type="0" count="0">First Name</th>
<th class="tHeader" index="2" type="0" count="0">Email</th>
<th class="tHeader" index="3" type="1" count="0">Point</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>195</td>
</tr>
<tr>
<td>6</td>
<td>Frank</td>
<td>fbach@yahoo.com</td>
<td>107</td>
</tr>
<tr>
<td>4</td>
<td>Andy</td>
<td>andy@rediff.com</td>
<td>290</td>
</tr>
</tbody>
</table>
Here is the Script to use the Table sorter:
We declare two values to variable sorting
1. _colindex : which specifies the column index of clicked Header
2. _type : which specifies the type of that column.(type of sorting to be done)
<script type="text/JavaScript">
$(document).ready(function()
{
$("#Table").tablesorter();
/* we call the tablesorter function on id because idattribute specifies a unique id for an
HTML element */
$("#Table tr .tHeader").on("click",function(){
var _colindex = $( this ).attr("index");
var _type = $( this ).attr("type");
if( _type == 1 )
{
var _count = $( this ).attr("count");
if( _count == 0 ){
_count+ = 1;
$( this ).attr( "count" , _count );
var sort = [[_colindex,_type]];
$( "table" ).trigger("sorton",[sort]);
}
}
});
});
</script>
I do accept as true with all the concepts you’ve offered on your post.
They are really convincing and can certainly work. Nonetheless, the posts are very brief for
starters. May you please prolong them a bit from subsequent time?
Thank you for the post.
Glad you liked it!
Sure, We will work on it.
For hottest news you have to visit world wide web and on world-wide-web I found this
web page as a finest web site for most recent updates.