Bonjour,
Existe-t-il un raccourci qui permette de rendre les tableaux triables en cliquant sur les titres de colonnes ?
Ou dois-je obligatoirement passer par du codage #Tri ?
--
Sandy-Pascal
www.essaillon-sederon.net
J'ai trouvé le plugin Tablesorter mais je ne comprends rien aux explications.
Je ne sais pas comment ni où insérer le code préconisé dans mon article...
<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>
Sandy-Pascal
www.essaillon-sederon.net
Le 01/09/2017 à 17:43, andriant.sandy a écrit :
Bonjour,
Existe-t-il un raccourci qui permette de rendre les tableaux triables en cliquant sur les titres de colonnes ?
Ou dois-je obligatoirement passer par du codage #Tri ?
C’est du code html+SPIP, tu ne peux donc pas mettre ceci directement dans un article.
Mais tu peux passer par un modèle :
Pour faire simple
- Tu crées un dossier /squelettes/modèles
- Dans ce dossier tu crées un modèle tablesorter.html (par exemple)
- Dans ce fichier, tu colles le code exemple que tu as donné
- Dans un article, dans la partie texte, tu mets juste <tablesorter|>
- et hop, tu as un tableau avec l’id, le titre et la date des 100 derniers articles du site
Testé en local, ça donne ça
Après, on peut jouer avec les css et surtout avec le contenu du tableau en modifiant la boucle (type et critères)
Mais ça veut dire un modèle différent pour chaque tableau ou alors il faut jouer avec les paramètres qu’on peut passer au modèle
En fait tout dépend du nombre de tableaux que tu veux faire ainsi
Bonsoir Jean-Claude,
Je tente de suivre pas à pas ta procédure…
- Tu crées un dossier /squelettes/modèles
- Dans ce dossier tu crées un modèle tablesorter.html (par exemple)
OK : web/squelettes/modeles/tablesorter.html
- Dans ce fichier, tu colles le code exemple que tu as donné
OK
- Dans un article, dans la partie texte, tu mets juste <tablesorter|>
Dois-je mettre le N° de l’article après la pipe ? : <tablesorter|406> ou <tablesorter|art406>?
- et hop, tu as un tableau avec l’id, le titre et la date des 100 derniers articles du site
Marche pas
Petit hic, mon tableau n’est pas codé en html mais en langage SPIP. (que des pipes au lieu des balises html)
C’est peut-être ça qui coince…
Je retente après modif du code du tableau.
Non, tu mets exactement ce que je t’ai dit
Chez moi, ça a marché tout de suite (il faut bien sur installer le plugin tablesorter)
Jean-CHRISTOPHE
C’est bien ça.
Avec les balises html, ça fonctionne !
Merci
hmm, c’est louche ça !
Normalement ce n’est pas nécessaire, voire déconseillé de rajouter les balises html
Bon,
Alors, ça marche avec les codes tableau de SPIP
mais ça crée aussi en premier un tableau contenant les entêtes du menu.
Quel code dans ton modèle ?
Mises à jour et ajouts de relevés en 2017
<BOUCLE_a(ARTICLES){0,100}>
<tr[ class="(#COMPTEUR_BOUCLE|alterner{‹ row_even ›,‹ row_odd ›})"]>
| Tri des dates | Date | Ville [Département] |
Actes | Nombre d'actes |
Période |
|---|---|---|---|---|---|
| #ID_ARTICLE | [(#TITRE|supprimer_numero|couper{30})] | [(#DATE|affdate)] |
Ben tout est ok non ?
Je viens de coller ce code dans mon modèle, sans balise html ni de pipe et ça roule.
où est le souci ?
Mais bien sur le tableau est repli de données qui ne correspondent pas car tu n’as pas modifié la BOUCLE_a
D’où proviennent les données qui doivent remplir ce tableau ? Un fichier csv ?
Les données sont dans la page avec des Pipes.
Je dois les mettre dans le fichier tablesorter.html ?
Sous quel format ?
Pour une raison que j’ignore et qui me dépasse, récupère en premier les articles du menu horizontal et en fait le seul tableau sortable de la page.
Le vrai tableau, dessous est juste affiché sans entête et non triable.
Ah, OK, je commence à comprendre le principe.
Mais où dois-je placer le fichier csv et surtout comment i faire référence dans la boucle ?
Ok, je commence à voir où tu coinces.
Là dans ton code tu as modifié la ligne de titre des colonnes avec les 6 mais ta boucle ne sort que 3 colonnes avec les 3
Pour arriver à tes fins, il faut :
-
créer un fichier données.csv (par exemple) avec libre office par exemple qui contient toutes tes données et que tu mets dans /squelettes/data (par exemple)
-
remplacer la
<BOUCLE_a(ARTICLES){0,100}>
<tr[ class="(#COMPTEUR_BOUCLE|alterner{‹ row_even ›,‹ row_odd ›})"]>
#ID_ARTICLE [(#TITRE|supprimer_numero|couper{30})] [(#DATE|affdate)]par une boucle DATA qui devrait ressembler à ça (à tester bien sur !) → voir https://www.spip.net/fr_article5443.html#BOUCLE-DATA- pour plus d’info (partie sur les fichiers CSV)
<BOUCLE_a(DATA){source csv, #CHEMIN{data/donnees.csv}}>
<tr[ class="(#COMPTEUR_BOUCLE|alterner{‹ row_even ›,‹ row_odd ›})"]>
#VALEUR{0} #VALEUR{1} #VALEUR{2} #VALEUR{3} #VALEUR{4} #VALEUR{5}
Super,
J’essaierai demain.
Merci
Bilan des courses,
Code de tablesorter.html
<B_a>
<BOUCLE_a(DATA){source csv, #CHEMIN{data/maj_2017_2.csv}}>
<tr[ class=« (#COMPTEUR_BOUCLE|alterner{‹ row_even ›,‹ row_odd ›}) »]>
Tri des dates Date Ville [Département] Actes Nombre
d'actesPériode #VALEUR{0} #VALEUR{1} #VALEUR{2} #VALEUR{3} #VALEUR{4} >#VALEUR{5} #VALEUR{6}
Pour pouvoir utiliser les entités html, le fichier maj_2017_2.csv est avec le séparateur vigule et les éléments sont encadrés par des double quotes.
« abc »,« def » …
Sinon les ; des entités html ajoutent une cellule et tout est cassé.
Merci pour le coup de main.
Cool !
Juste 2 remarques :
-
pourquoi [26] et pas [Drome] ?
-
du coup, l’intérêt des lignes paires et impaires colorées différemment est limité car dès qu’on fait un tri, ça ne fonctionne plus