Maison > interface Web > js tutoriel > Comment utiliser le composant de tri de table tablesorter dans jquery ?

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

伊谢尔伦
Libérer: 2017-07-22 09:33:08
original
1553 Les gens l'ont consulté

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

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

3.

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

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");
Copier après la connexion
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]]]);
Copier après la connexion
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!

É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