Maison > Article > interface Web > 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
- 伊谢尔伦original
- 2017-07-22 09:56:502538parcourir
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>
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>
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>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!