Tutoriel exemple pour la construction d’un tableau via le plugin Tablesorter

Prés-requis
Activé le plugin Tablesorter

Mise en service
Dans un article, il vous faudra inserer votre modeles construit de la maniére suivante :

• dans votre modeles, structurez les tableaux auxquels vous souhaitez ajouter les possibilités de tri en utilisant les balises <thead>,<tbody> et <th>

 
<h1>Exemple d'utilisation du plugin "tablesorter pour SPIP"</h1>
<B_a>
<table class="spip tablesorter" style="margin-left: 200px; width:400px">
 
	<thead>
 
		<tr class="row_first">
			<th>ID</th>
			<th>TITRE</th>
			<th>DATE</th>
		</tr>
 
	</thead>
 
	<tbody>
 
<BOUCLE_a(ARTICLES){0,100}>
 
		<tr[ class="(#COMPTEUR_BOUCLE|alterner{'row_even','row_odd'})"]>
			<td>#ID_ARTICLE</td>
			<td>[(#TITRE|supprimer_numero|couper{30})]</td>
			<td>[(#DATE|affdate)]</td>
		</tr>
</BOUCLE_a>
 
	</tbody>
 
</table>
</B_a>

Nous allons cette fois afficher un fichier au format CSV dans un article de votre site

Rappel : Votre fichier .csv est contruit de la maniére suivante :

• Séparateur : ; (point-virgule)
• Données encadrées par : " ... " (double quote)
• Utiliser les caractères spéciaux html : é => &eacute ; ...

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

• les données : votre fichier .csv
  ce fichier ne doit contenir QUE les données du tableau, à ’exclusion des titres de colonnes !
  • Créer un dossier /data pour les données (Impératif)
  • Envoyer par FTP le fichier .csv dans ce dossier
    /squelettes/data/xxx.csv

Exemple de fichier .csv
pour notre exemple, il se nomme membres.csv

• le modeles <modeles|>
  • Créer un dossier dans votre répertoire /squelettes, le répertoire /modeles si il n’existe pas
  • Envoyer par FTP le fichier modeles.html dans ce dossier
    /squelettes/modeles/modeles.html

Noté que : modeles devra porté le nom de votre modeles en plus de tablesorter (imperatif).

pour notre exemple il se nomme : tablesorter_membresspipfactory.html

Ce fichier contient la boucle :

<tbody>

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

xxx.csv : doit indiquer le nom du fichier

– pour notre exemple
<BOUCLE_a(DATA){source csv,#CHEMIN{data/membres.csv}}>

Vous pouvez créer autant de tableau que vous souhaitez, du momment que vouas ayez un couple fichier csv + modeles et que chaque coupl porte un nim différent.
Ex :

• tablesorter_deux.html
• tablesorter_abc.html
• tablesorter_maj.html

pour notre exemple, nous avons le couple
membres.csv + tablesorter_membresspipfactory.html

Ce qui nous donnera
<tablesorter_membresspipfactory|>

La boucle compléte de notre exemple

<B_a> <!-- début de la boucle-->
<table class="spip tablesorter" style="align:center; width:50%">
<!--les balises de style ne sont pas indispensables-->
        <thead>
<!-- Les n-colonnes de titre (ajouter autant de <th>...</th> que nécessaire, avec les titres qui vont bien) -->
                <tr class="row_first" >
<!-- Utiliser <th class="ts_disabled"> pour empêcher le tri sur une colonne-->
                    <th style="text-align:right">SITES</th>
					<th style="text-align:center">NOM</th>
                </tr>
        </thead>

<!-- La boucle qui récupère les données du fichier inclus dans le dossier 
	web/squelettes/data/tablesorter_xxx.csv -->
        <tbody>
		<BOUCLE_a(DATA){source csv, #CHEMIN{data/membres.csv}}>
                <tr [class="(#COMPTEUR_BOUCLE|alterner{'row_even','row_odd'})"]>
<!-- Ajouter autant de <td>...</td> que de <th>...</th>	-->
                <td style="text-align:right">#VALEUR{0}</td>
                <td>#VALEUR{1}</td>
                </tr>
		</BOUCLE_a>
        </tbody>
</table>
</B_a>

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.