accessibilité
SpipFactory.fr




IRC : /join ##spipfactory

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 15 janvier 2020

Plugin Tablesorter pour tableau « triable »

Ce qu’on cherche à obtenir
Ex : Un carnet d’adresses qu’on peut trier sur toutes les colonnes.

NOM Prénom Lieu de Résidence
1 ALBERT Georges Paris
2 CHARLES Marie Bordeaux
3 POURROY Zénobie Lyon
4 DIDIER Michel Nantes
5 MARIE Henri La Rochelle
6 CLÉMENT Claude Hyères
7 HENRI Caroline Marseille
8 ANDRÉ Charles Dijon
9 ZANOLLI Pietro Rome

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 :  ; (point-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
    • ou Télécharger le fichier :

Ce fichier contient la boucle :

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 : | )
    <tablesorter|>

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,

<tbody>

<BOUCLE_a(DATA){source csv,#CHEMIN{data/mise_a_jour_2017_09.csv}}>

le chemin :

#CHEMIN{data/xxx.csv}}>

doit indiquer le nom du nouveau fichier :

<BOUCLE_a(DATA){source csv,#CHEMIN{data/def.csv}}>

<BOUCLE_a(DATA){source csv,#CHEMIN{data/maj_2016-12.csv}}>

<BOUCLE_a(DATA){source csv,#CHEMIN{data/adherents.csv}}>

5. Un exemple actif pour tester d’autres possibilités

On peut également 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.

  • Ex : pour empêcher le tri sur les dates <th class="ts_disabled">Date de Naissance</th>

NB : tous ces individus sont fictifs.

NOM Prénom Sexe Lieu de Naissance Date de Naissance
Le tri se fait par la colonne suivante
Tri Date_Naiss
Date au format AAAAMMJJ
1 ALBERT Georges M Paris 01-02-1819 18190201
2 CHARLES Marie F Bordeaux 31-10-1795 17951031
3 POURROY Zénobie F Lyon 25-05-1652 16520525
4 DIDIER Michel M Nantes 12-03-1901 19010312
5 MARIE Henri M La Rochelle 21-02-1899 18990221
6 CLÉMENT Claude F Hyères 20-02-1899 18990220
7 HENRI Caroline F Marseille 03-11-1899 18991103
8 ANDRÉ Charles M Dijon 08-12-1721 17211208
9 ZANOLLI Pietro M Rome 28-09-1865 18650928
A télécharger
Le code affiché dans la page pour faire apparaître le tableau : <exemple_naiss|>

Ref :


« Sur SpipFactory, le bug vient souvent de l’interface entre la chaise et le clavier »

puceMentions légales puce

2017-2020 © SpipFactory.fr - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.3.41
Hébergeur : SpipFactory