Detailed explanation of the steps for using the table sorting component tablesorter

This time I will bring you Tables Detailed explanation of the steps for using the sorting component tablesorter, what are the precautions for using the table sorting component tablesorter, 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:

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 the 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, and the homepage does not work when sorting Problem
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 has really bothered me for 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
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:

Detailed explanation of how jquery operates data in tables

What are the techniques for operating JQuery tables?

The above is the detailed content of Detailed explanation of the steps for using the table sorting component tablesorter. For more information, please follow other related articles on the PHP Chinese website!