I. Introduction of DOCUMENTS
<script type= "Text/javascript" src= "js/jquery.js" ></script> <script type= "Text/javascript" src= "js/ Jquery.tablesorter.js ></script> <!--The following styles are introduced, the header appears with the sort icon, and the picture is introduced --><link href= "Css/style.css" Rel= "stylesheet" type= "Text/css" >
effect
Second, standard HTML table, must include thead and tbody tags
<table id= "myTable" class= "Tablesorter" > <thead> <tr> <th>Name</th> <th>Sex</th> <th>Address</th> </tr> </thead> < tbody> <tr> <td>zhangsan</td> <td>boy</td> <td> beijing</td> </tr> <tr> <td>lisi</td> <td>girl</td > <td>shanghai</td> </tr> <tr> ... Slightly </tr>
third, set table can be sorted
$ (document). Ready (function () { //The first column is not sorted (index starting from 0) $.tablesorter.defaults.headers = {0: {sorter:false}}; $ (". Tablesorter"). Tablesorter (); });
Official document: http://tablesorter.com/docs/
Additional notes:
In the use of the process encountered a problem, my tabular data is obtained through AJAX, the first page to sort the time no problem
When the next page is sorted, the data from the page will be displayed again, solving the problem after you have AJAX access to the data
Trigger an "Update" event with the following code:
$ (". Tablesorter"). Trigger ("Update");
The above problems really headache for a long time, just began to use the official online pager plugin, found that this is not appropriate.
and online search data collation the following code:
$ (". Tablesorter tbody tr"). AddClass ("delete"); $ (". Tablesorter tbody Tr.delete"). Remove ();
It was all used, and the test found only $ (". Tablesorter"). Trigger ("Update"); This sentence will solve the problem.
The others don't know what it is.
Required Documents: http://download.csdn.net/detail/itmyhome/7389871
Style.css and pictures under the Themes\blue path.