JQuery tablesort component tablesorter use example

I. introduction of documents

 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.tablesorter.js"></script> 
<!--  When the following styles are introduced, the sort icon appears in the header and the image is introduced  --> 
<link href="css/style.css" rel="stylesheet" type="text/css" > 

The effect is as follows:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/20140526094752.jpeg? 201442694826 ">  
Standard HTML forms 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> 
</tbody> 
</table> 

Three, set the table to sort

 
$(document).ready(function(){ 
//The first column is not sorted (index starts at 0)
$.tablesorter.defaults.headers = {0: {sorter: false}}; 
$(".tablesorter").tablesorter(); 
}); 

The official document: http://tablesorter.com/docs/

Additional notes:

One of the problems I encountered during the usage process was that my table data was obtained through ajax, and I had no problem sorting the front page

When the next page is sorted, the data from the previous page is also redisplayed, which can be solved after your ajax fetch

Trigger "update" event, the code is as follows:

 
$(".tablesorter").trigger("update"); 

The above problems have been a real headache for a long time, and the Pager plugin on the official website, which I just started to use, found it inappropriate.

Also check the information online to sort out the following code:

 
$(".tablesorter tbody tr").addClass("delete"); 
$(".tablesorter tbody tr.delete").remove(); 
$("table tbody").append(html); 
$(".tablesorter").trigger("appendCache"); 
$(".tablesorter").trigger("update"); 
$(".tablesorter").trigger("sorton",[[[2,1],[0,0]]]); 

So we use it all, and we've tested it for a long time and it's just $(".tablesorter").trigger("update"); This sentence will solve the problem

I don't know what the rest is.

The required file download address: (link: http://xiazai.jb51.net/201405/yuanma/jquery.tablesorter.zip)

Style. CSS and pictures are under the themes\blue path.