Maison > interface Web > js tutoriel > Utilisation de jquery.sortElements pour implémenter les compétences de tri_javascript de table

Utilisation de jquery.sortElements pour implémenter les compétences de tri_javascript de table

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Libérer: 2016-05-16 16:50:15
original
934 Les gens l'ont consulté

La fonction de tri des tableaux doit être implémentée dans le projet.

Il existe de nombreuses solutions en ligne, dont beaucoup sont basées sur jQuery.

jquery.tablesorter, taille 17 Ko, mais sa page d'accueil présente quelques problèmes de compatibilité sous IE10.
DataTables, d'une taille de 75 Ko, puissants, avec pagination, recherche et autres fonctions.
Il existe également un plug-in appelé sortElements, qui est très petit, seulement 3 Ko, a une bonne compatibilité et compte 818 étoiles sur Github.

Finalement j'ai choisi d'utiliser sortElements, la mise en œuvre est très simple :

1 Introduire jQuery

Copier le code<.> Le code est le suivant :

2. Introduction sortElements.js



code js


Copier le code Le code est le suivant : $(document).ready(function(){
var table = $(' #mytable');//identifiant de la table
$('#sort_header')//En-tête à trier
.each(function(){
var th = $(this),
thIndex = th.index(),
inverse = false;

th.click(function(){
table.find('td').filter(function(){
return $(this).index() === thIndex;
}).sortElements(function(a, b){
return $.text([a]) > $.text([b]) ?
inverse ? inverse;

});
});


4. >Copier le code


Le code est le suivant :


id="sort_header">Nom de l'établissement
th>Spécialité

td> ...
Téléphone Ville
CCC
Étiquettes associées:
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