Detailed explanation of using tablesorter plug-in (with case)

This time I will bring you a detailed explanation of the use of the tablesorter plug-in (with cases). What are the precautions when using the tablesorter plug-in? The following is a practical case, let's take a look.

1. Import the file

<script type="text/
javascript
" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.tablesorter.js"></script> 
<!-- 引入以下样式则表头出现排序图标，同时引入图片 --> 
<link href="css/style.css" rel="stylesheet" type="text/css" >

The effect is as shown in the figure:

2. The standard HTML form 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> 
...略 
</tr> 
</tbody> 
</table>

3. Set table to be sortable

$(
document
).ready(function(){ 
//第一列不进行排序(索引从0开始) 
$.tablesorter.defaults.headers = {0: {sorter: false}}; 
$(".tablesorter").tablesorter(); 
});

Official document: http://tablesorter.com/docs/
Supplementary instructions:
A problem encountered during use, My table data is obtained through ajax. There is no problem when sorting the home page.
When sorting the next page, the data on the previous page will be re-displayed. To solve this problem, you can solve this problem after you obtain the data through ajax.
To trigger the "update" event, the code is as follows:

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

The above problem has really caused me a headache for a long time. I just started using the Pager plugin on the official website and found that this is not suitable.
I checked the information online and sorted out the following codes:

$(".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 I used them all. After long testing, I found that only $(".tablesorter").trigger("update"); can solve the problem
I don’t know what the others are.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

jQuery cross-domain iframe interface call (with code)

jQuery obtains the IFrame and its parent window object and use

The above is the detailed content of Detailed explanation of using tablesorter plug-in (with case). For more information, please follow other related articles on the PHP Chinese website!