Share
Ce que vous allez créerTablesorter est un plugin simple jQuery qui fournit un tri et une pagination dynamiques des colonnes dans vos tableaux HTML. C'est un bon moyen de fournir des tables scriptables triables qui ne nécessitent pas que l'utilisateur actualise la page. Vous pouvez également l'utiliser lorsque vous utilisez Ajax dans votre application..
Ce tutoriel présentera le code actuel et trois exemples d'utilisation de Tablesorter. Vous pouvez télécharger le code sur GitHub. Notez que le téléchargement de Tablesorter manque en réalité de quelques images pour ses pagers. Vous pouvez donc utiliser mes fichiers GitHub..
Mon premier exemple montre comment utiliser Tablesorter pour fournir une liste triable des domaines Internet à vendre. Vous pouvez voir la démo ici et le code ici.
Il y a quelques composants que nous devons configurer pour Tablesorter. Premièrement, nous devons charger jQuery et le plugin tablesorter. Je vais aussi charger son thème CSS bleu:
Ensuite, nous allons construire le tableau HTML:
| Nom de domaine | gTld | Catégorie | Prix | Contact |
|---|---|---|---|---|
| geogram.co | co | l'Internet | 49 $ | achat |
| newscloud.com | com | Nouvelles | 19999 $ | achat |
| popcloud.com | com | La musique | 14999 $ | achat |
Après cela, nous devons initialiser Tablesorter lors du chargement de la page:
Dans l'exemple ci-dessus, je mets la quatrième colonne, qui est la colonne prix, à trier par ordre décroissant, et la troisième colonne, qui est la colonne catégorie, à trier par ordre croissant..
Une fois cela fait, vous devriez voir quelque chose comme ça:
Si vous ne chargez pas vos tables de manière dynamique à partir d'une base de données, vous vous demandez s'il existe un moyen plus simple de générer du code de table HTML à partir de longues listes. Il y a! Je le décris dans Comment garer, lister et vendre vos domaines.
J'utilise essentiellement un tableur Google Drive qui répertorie mes domaines, catégories et prix, et j'utilise des fonctions de concaténation pour générer des alias de serveur Apache, du code de tarification JavaScript et la ligne HTML de la table Tablesorter:
Voici à quoi ressemble une fonction de concaténation dans Google Drive:
Accentsconagua
= CONCATENER ("","", F2" ",""B2" ","", D2," ","$ ", TO_DOLLARS (E2)," ","", G2," "," ")J'utilise le thème Domena disponible sur Envato Market en tant que pages de destination pour chaque domaine:
J'ai personnalisé JavaScript dans le thème pour modifier le prix en fonction du domaine chargé. Je pense que les nouvelles versions de Domena traitent plusieurs domaines de manière plus élégante..
Nous allons maintenant vous montrer comment implémenter la pagination avec Tablesorter. Vous pouvez voir la démo ici et obtenir le code ici. Ça devrait ressembler a quelque chose comme ca:
Cette fois, nous allons initialiser Tablesorter dans le étiquette. Nous ajouterons également le script du plugin Tablesorter:
Nous allons placer le code HTML div pour le téléavertisseur sous la table:
C'est tout.
Notez que les icônes du pager ont été supprimées du site GitHub de Tablesorter. Je les ai donc téléchargées manuellement à partir de la démonstration. Il peut être plus facile pour vous de les obtenir à partir de la version forkée du référentiel Tuts +.
Nous allons maintenant voir comment utiliser jQuery pour renseigner une table Tablesorter de manière dynamique. Pour commencer, nous allons initialiser une table Tablesorter avec uniquement des domaines .IO. Ça va ressembler à quelque chose comme ça:
Lorsque vous cliquez sur le Ajouter des domaines .COM lien, vous verrez la table se développer avec les domaines .COM.
Vous pouvez voir la démo ici et le code ici. Le code HTML de la requête Ajax avec les domaines .COM est ici.
Voici le code qui répond à l'événement click, chargeant des lignes supplémentaires via Ajax:
p> Ajouter des domaines .COM via AJAX
Tablesorter peut certainement améliorer l'expérience utilisateur s'il est bien utilisé.
J'espère que vous avez trouvé ce tutoriel utile. N'hésitez pas à poster des corrections, des questions ou des commentaires ci-dessous. Vous pouvez également me joindre sur Twitter @reifman ou m'envoyer un email directement.
