communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Explication détaillée de la façon dont le plug-in jquery tablesorter implémente des exemples d'utilisation de table HTML

Explication détaillée de la façon dont le plug-in jquery tablesorter implémente des exemples d'utilisation de table HTML

伊谢尔伦
Libérer： 2017-07-22 09:56:50
original
2670 Les gens l'ont consulté

tablesort est un plug-in de tri de tables jQuery très utile. Il prend en charge le tri de plusieurs types de données, identifie automatiquement le type de données du contenu du tableau et est très pratique à utiliser.

Utilisez jQuery tablesort pour implémenter la méthode de table html :

1 Téléchargez les scripts jQuery et tablesort et référencez le fichier de script en html :

. 


<script type="text/javascript" src="../jquery-latest.js"></script>
<script type="text/javascript" src="../jquery.tablesorter.js"></script>
Copier après la connexion

2. Formatez le tableau html qui doit être trié :

a. : class="sort-table "
b. Utilisez les balises thead et tbody pour marquer l'en-tête et le corps du tableau
c Dans l'en-tête du tableau, vous devez utiliser la balise th pour définir l'en-tête du tableau
. 🎜>Le tableau html formaté est le suivant : 


<table border=1 width="800px" class="sort-table">
<thead>
 <tr>
 <th>Date</th>
 <th>Usage</th>
 <th>Cost</th>
 <th>Remain</th>
 </tr>
</thead>
<tbody>
 <tr>
 <td>2008-3-25</td>
 <td>book place @dhgu</td>
 <td>-40</td>
 <td>-40</td>
 </tr>
 <tr>
 <td>2008-4-1</td>
 <td>book place @dhgu</td>
 <td>-40</td>
 <td>-80</td>
 </tr>
</tbody>
</table>
Copier après la connexion

3 Ajoutez du code jQuery pour activer le tri des tableaux html :
Appelez tablesorter dans le corps. sur la classe CSS de table triée spécifiée dans la fonction deuxième étape (): 


<body>
<script type="text/javascript">
 $(document).ready(function() {
 $(".sort-table").tablesorter(); 
 });
</script>
Copier après la connexion

Grâce aux 3 étapes ci-dessus, jQuery tablesort peut trier les tables html.

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：
jquery 实现
source：php.cn
Article précédent：Introduction à la façon dont JavaScript et HTML5 implémentent des motifs circulaires de dessin sur toile Article suivant：Explication détaillée de la méthode originale et de la méthode améliorée d'obtention des données de formulaire en javascript
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
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2342
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2473
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
2095
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1972
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
2044
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal