Maison > interface Web > js tutoriel > Explication détaillée des étapes d'utilisation du composant de tri de tableaux tablesorter

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

php中世界最好的语言
Libérer: 2018-04-24 13:52:11
original
2154 Les gens l'ont consulté

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" >
Copier après la connexion

L'effet est comme indiqué dans la figure :
Explication détaillée des étapes d'utilisation du composant de tri de tableaux tablesorter
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>
Copier après la connexion

Explication supplémentaire :
$(
document
).ready(function(){ 
//第一列不进行排序(索引从0开始) 
$.tablesorter.defaults.headers = {0: {sorter: false}}; 
$(".tablesorter").tablesorter(); 
});
Copier après la connexion
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");
Copier après la connexion
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]]]);
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal