logo site
SpipFactory.fr
Slogan du site

C’est une plateforme d’hébergement autogéré en association de loi 1901.
Propulsée par la mutualisation de Spip. Habillage Escal .

logo article ou rubrique
Plugin Tablesorter pour tableau « triable »
Article mis en ligne le 2 septembre 2019

Plugin Tablesorter pour tableau « triable »

Les tableaux sont gérés par 2 fichiers distincts.

1. Les données

Créer un fichier .csv portant un nom significatif.

  • mise_a_jour_2017_09.csv
  • Séparateur : , (virgule)
  • Données encadrées par : " ... " (double quote)
  • Utiliser les caractères spéciaux html : é => &eacute ; ...
    (inutile si on passe le fichier par l’encodage « Convertir en UTF 8 » de Notepad++)

NB : ce fichier ne doit contenir QUE les données du tableau, à l’exclusion des titres de colonnes !

Créer un dossier spécifique pour les données

web > squelettes > data

Par ftp: envoyer le fichier mise_a_jour_2017_09.csv dans ce dossier ../data/

web/squelettes/data/mise_a_jour_2017_09.csv

2. Le créateur de la boucle <tablesorter|>

Créer un dossier spécifique :

web > squelettes > modeles

Créer un fichier tablesorter.html

Ce fichier contient la boucle :

   1. <h1>Exemple d'utilisation du plugin « tablesorter pour SPIP »</h1>
   2. <B_a>
   3. <table class="spip tablesorter" style="margin-left: 200px; width:400px">
   4. <thead>
   5. <tr class="row_first">
   6. =====
   7. <th>ID</th>
   8. <th>TITRE</th>
   9. <th>DATE</th>
   10. </tr>
   11. </thead>
   12. =====
   13. <tbody>
   14. <BOUCLE_a(DATA){source csv, #CHEMIN{data/mise_a_jour_2017_09.csv}}>
   15. <tr[ class="(#COMPTEUR_BOUCLE|alterner{'row_even','row_odd'})"]>
   16. =====
   17. <td>#VALEUR{0}</td>
   18. <td>#VALEUR{1}</td>
   19. <td>#VALEUR{2}</td>
   20. </tr>
   21. </BOUCLE_a>
   22. </tbody>
   23. </table>
   24. </B_a>

Ne pas trier sur une ou plusieurs colonnes précises

Pour empêcher de trier sur une colonne, il suffit d’ajouter la class ts_disabled sur le th de la colonne.

3. Page avec tableau triable

Dans SPIP, créer une page et y insérer à l’endroit qui va bien la balise composée de 3 éléments :

  • ouverture :<
  • nom du fichier html : tablesorter (sans l’extension .html)
  • fermeture : |> (ne pas oublier la pipe : | )

4. Créer d’autres tableaux

  • Créer un autre fichier .csv et le placer dans ../data/
  • Créer un autre fichier .html dans ../modeles/
  • Son nom est compsé de 3 éléments
    • il doit commencer par « tablesorter »
    • il doit avoir un index en lettres : _un, _deux, _abc …
    • son extension est : .html
      Ex :

tablesorter_deux.html

tablesorter_abc.html

tablesorter_maj.html

Dans la boucle,

le chemin :

#CHEMINdata/xxx.csv

>

doit indiquer le nom du nouveau fichier :




Ref :

qrcode:https://spipfactory.fr/plugin-tablesorter-pour-tableau-triable



puceMentions légales puce

2017-2019 © SpipFactory.fr - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.3.20
Hébergeur : SpipFactory
Soutenir par un don