Explication détaillée de l'utilisation du plug-in tablesorter (avec étui)

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du plug-in tablesorter (avec cas). Quelles sont les précautions lors de l'utilisation du plug-in tablesorter. Voici des cas réels, voyons. jetez un 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 tags thead et tbody

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

Document officiel : http://tablesorter.com/docs/

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

Instructions supplémentaires :

Pendant le processus d'utilisation Un problème que j'ai rencontré est que 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. . Ce problème peut être résolu Une fois que votre ajax a obtenu les données,
déclenche l'événement "update" Le code est le suivant :

Le problème ci-dessus me cause vraiment des maux de tête depuis longtemps. Je viens de commencer à utiliser le plugin Pager sur le site officiel et j'ai trouvé que cela 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 :

Appel d'interface iframe inter-domaines jQuery (avec code)

jQuery obtient l'IFrame et son objet fenêtre parent et utiliser

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!