Ici & Là

01 Société 02 Histoire 03 Science 04 Science fiction 05 SPIP 06 NTIC 07 Sondages 08 Divers
La meilleure façon de réaliser ses rêves est de se réveiller (Paul Valéry)

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 François Daniel Giezendanner

Notez cet article
0 vote

Cyril 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é :

  1. Activez le Plugin Tablesorter pour SPIP
  2. Créez un tableau en utilisant les balises « pipe » pour SPIP.
  3. ... 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 :

  1. Activez le plugin Tablesorter.
  2. Créez un tableau en SPIP utilisant les balises « pipe » pour SPIP.
  3. Faites en un copier-coller wysiwyg dans Kompozer (par exemple) et récupérez le code HTML ainsi produit.
  4. 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.
  5. Ajoutez la balise <B_a> en début de code et </B_a> en fin de code.
  6. 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&egrave;tre </th>
   <th scope="col"> Quantit&eacute;1 </th>
   <th scope="col"> Quantit&eacute;2 </th>
   <th scope="col"> Quantit&eacute;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&egrave;tre </th>
   <th scope="col"> Quantit&eacute;1 </th>
   <th scope="col"> Quantit&eacute;2 </th>
   <th scope="col"> Quantit&eacute;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