How to use tablesorter table sorting component in jquery?

1. Import files

<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" >

2. Standard HTML tables 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(); 
});

Additional explanation:

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,

trigger the "update" event after you obtain the data with ajax. The code is as follows:

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

The above problem is really a headache After a long time, I just started using the Pager plugin on the official website and found that it was 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

The above is the detailed content of How to use tablesorter table sorting component in jquery?. For more information, please follow other related articles on the PHP Chinese website!