Accueil > SPIP > Quelques plugins utiles > Plugin Tablesorter pour SPIP : trier les tableaux html en cliquant sur les (...)
Plugin Tablesorter pour SPIP : trier les tableaux html en cliquant sur les entêtes des colonnes
lundi 12 décembre 2016, par
Notez cet articleCyril MARION met à notre disposition le plugin Tablesorter qui permet de trier les tableaux html en cliquant sur les entêtes des colonnes.
Présentation du plugin jQuery « TableSorter »
Dans son article Tablesorter pour SPIP Cyril Marion explique comment trier les tableaux html en cliquant sur les entêtes des colonnes grâce à son plugin jQuery « TableSorter ».
Nous donnons ici une rapide prise en main. Si la démonstration n’est pas fonctionnelle sur cette page c’est parce que le plugin « TableSorter » n’est pas activé sur ce site.
En toute simplicité : Tableau créé en utilisant les balises « pipe » pour SPIP
En toute simplicité :
- Activez le Plugin Tablesorter pour SPIP
- Créez un tableau en utilisant les balises « pipe » pour SPIP.
- ... et le tri des tableau est fonctionnel
Paramètre | Quantité1 | Quantité2 | Quantité3 |
---|---|---|---|
Couleur | 20 | 90 | 50 |
Texture | 70 | 10 | 60 |
Reflet | 40 | 5 | 70 |
Hombre | 10 | 60 | 65 |
En mode complet
Pour l’essayer :
- Activez le plugin Tablesorter.
- Créez un tableau en SPIP utilisant les balises « pipe » pour SPIP.
- Faites en un copier-coller wysiwyg dans Kompozer (par exemple) et récupérez le code HTML ainsi produit.
- Autre possibilité : au lieu des points 2. et 3. ci-dessus créez directement un tableau dans l’éditeur wysiwyg Kompozer et récupérez le code HTML ainsi produit.
- Ajoutez la balise
<B_a>
en début de code et</B_a>
en fin de code. - Changez la balise
<table>
en<table class="spip tablesorter">
.
C’est terminé.
Exemple 1 d’utilisation du plugin « tablesorter pour SPIP »
Paramètre | Quantité1 | Quantité2 | Quantité3 |
---|---|---|---|
Couleur | 20 | 90 | 50 |
Texture | 70 | 10 | 60 |
Reflet | 40 | 5 | 70 |
Hombre | 10 | 60 | 65 |
Exemple 2 d’utilisation du plugin « tablesorter pour SPIP »
Paramètre | Quantité1 | Quantité2 | Quantité3 |
---|---|---|---|
Couleur | 20 | 90 | 50 |
Texture | 70 | 10 | 60 |
Reflet | 40 | 5 | 70 |
Hombre | 10 | 60 | 65 |
Code pour créer le Tableau en utilisant les balises « pipe » pour SPIP
| {{Paramètre}} | {{Quantité1}} | {{Quantité2}} | {{Quantité3}} |
| Couleur | 20 | 90 | 50 |
| Texture | 70 | 10 | 60 |
| Reflet | 40 | 5 | 70 |
| Hombre | 10 | 60 | 65 |
Code HTML pour l’Exemple 1 d’utilisation du plugin « tablesorter pour SPIP »
<html>
<B_a>
<table class="spip tablesorter">
<thead><tr class="row_first">
<th scope="col"> Paramètre </th>
<th scope="col"> Quantité1 </th>
<th scope="col"> Quantité2 </th>
<th scope="col"> Quantité3 </th>
</tr>
</thead><tbody>
<tr class="row_odd">
<td> Couleur </td>
<td class="numeric"> 20 </td>
<td class="numeric"> 90 </td>
<td class="numeric"> 50 </td>
</tr>
<tr class="row_even">
<td> Texture </td>
<td class="numeric"> 70 </td>
<td class="numeric"> 10 </td>
<td class="numeric"> 60 </td>
</tr>
<tr class="row_odd">
<td> Reflet </td>
<td class="numeric"> 40 </td>
<td class="numeric"> 5 </td>
<td class="numeric"> 70 </td>
</tr>
<tr class="row_even">
<td> Hombre </td>
<td class="numeric"> 10 </td>
<td class="numeric"> 60 </td>
<td class="numeric"> 65 </td>
</tr>
</tbody>
</table>
</B_a>
</html>
Code HTML pour l’Exemple 2 d’utilisation du plugin « tablesorter pour SPIP »
<html>
<B_a>
<table class="spip tablesorter" style="margin-left: 10px; width:400px">
<thead><tr class="row_first">
<th scope="col"> Paramètre </th>
<th scope="col"> Quantité1 </th>
<th scope="col"> Quantité2 </th>
<th scope="col"> Quantité3 </th>
</tr>
</thead><tbody>
<tr class="row_odd">
<td> Couleur </td>
<td class="numeric"> 20 </td>
<td class="numeric"> 90 </td>
<td class="numeric"> 50 </td>
</tr>
<tr class="row_even">
<td> Texture </td>
<td class="numeric"> 70 </td>
<td class="numeric"> 10 </td>
<td class="numeric"> 60 </td>
</tr>
<tr class="row_odd">
<td> Reflet </td>
<td class="numeric"> 40 </td>
<td class="numeric"> 5 </td>
<td class="numeric"> 70 </td>
</tr>
<tr class="row_even">
<td> Hombre </td>
<td class="numeric"> 10 </td>
<td class="numeric"> 60 </td>
<td class="numeric"> 65 </td>
</tr>
</tbody>
</table>
</B_a>
</html>
Sources et documentation
Tablesorter pour SPIP
6 juillet 2009 – par Cyril Marion
https://contrib.spip.net/Tablesorter-pour-SPIP
Avec tableSorter, le tri sera top !
http://plugins.spip.net/tablesorter.html
tablesorter
Flexible client-side table sorting - Documentation
http://tablesorter.com/docs/
Plugin Tablesorter pour SPIP : activez simplement le plugin et c’est OK
Mardi 12 mars 2013 par François Daniel Giezendanner
http://icp.ge.ch/sem/cms-spip/spip.php?article1810
Plugin Tablesorter pour SPIP : trier les tableaux html en cliquant sur les entêtes des colonnes
Jeudi 24 janvier 2013 par François Daniel Giezendanner
http://icp.ge.ch/sem/cms-spip/spip.php?article1793
info sur le Plugin Tablesorter pour SPIP : trier les tableaux html en cliquant sur les entêtes des colonnes
Mardi 7 juillet 2009 par François Daniel Giezendanner
http://icp.ge.ch/sem/cms-spip/spip.php?article809