Explication détaillée des étapes d'utilisation du composant de tri de tableaux tablesorter

Cette fois, je vais vous apporter une explication détaillée des étapes d'utilisation du composant de tri table tablesorter. Quelles sont les précautions d'utilisation du composant de tri de table tablesorter ? un cas pratique. Jetons un coup d'oeil.

1. Importer le fichier

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

L'effet est comme indiqué dans la figure :

2. doit inclure les balises thead et tbody

3. Configurer la table pour qu'elle soit triable

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

Explication supplémentaire :

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

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

Lors du tri de la 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 Comme suit :

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é que celui-ci ne convenait pas. .

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

J'ai vérifié les informations en ligne et trié les codes suivants :

Je les ai donc tous utilisés après de longs tests, j'ai trouvé que seulement $(".tablesorter").trigger("update. "); peut résoudre le problème. Question

$(".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 ne sais pas quels sont les autres trucs.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de la façon dont jQuery exploite les données dans les tables

Quelles sont les techniques d'exploitation des tables JQuery ?

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!