Comment utiliser le composant de tri de table tablesorter dans jquery ?

1. Importer des fichiers

<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. Tableau HTML standard, doit inclure les balises thead et tbody

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

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

Explication supplémentaire :

Un problème rencontré lors de l'utilisation, les données de ma table sont obtenues via ajax, et il n'y a aucun problème lors du tri de la page d'accueil

Lors du tri des page suivante, les données de la page précédente seront réaffichées. Pour résoudre ce problème, vous pouvez déclencher l'événement "update"

après avoir obtenu les données avec ajax. Le code est le suivant : <🎜. >

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

Le problème ci-dessus me dérange vraiment depuis longtemps. Je viens de commencer à utiliser le plugin Pager sur le site officiel et j'ai trouvé qu'il ne convenait pas.

J'ai vérifié les informations en ligne et trié le code suivant :

$(".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]]]);

Je les ai donc tous utilisés. Après de longs tests, j'ai trouvé que seulement $(".tablesorter").trigger. ("mettre à jour"); cette phrase peut résoudre le problème

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!