SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 262 visiteurs en ce moment

Accueil > Rédaction > Graphiques et tableaux > Tablesorter > Tablesorter pour SPIP

Tablesorter pour SPIP

6 juillet 2009 – par Cyril Marion – 26 commentaires

13 votes

Avec tableSorter, le tri sera top ! [1]

Présentation

Le plugin jQuery « TableSorter » permet de trier les tableaux html en cliquant sur les entêtes des colonnes.

Le plugin SPIP « Tablesorter pour SPIP » permet d’ajouter automatiquement aux
squelettes SPIP les scripts nécessaires pour assurer cette fonction.

Fonctionnement

Le plugin détecte la classe CSS tableseorter attribuée à un élément <table class="spip">. Si le tableau est structuré avec les balises <thead> et <tbody>, il ajoute dans les balises <th> une image représentant le sens du tri, et un lien permettant de trier les données.

Le plugin se compose :
-  du script jQuery Tablesorter [2]
-  de la CSS d’origine (qui peut être modifiée dans /tablesorter/styles/tablesorter.css)
-  des icônes représentant le sens de tri (dans /tablesorter/images/)

Mise en service

  1. installez le plugin à partir de son emplacement sur la zone
  2. dans vos pages, structurez les tableaux auxquels vous souhaitez ajouter les possibilités de tri en utilisant les balises <thead>,<tbody> et <th>
  3. prenez garde à maintenir la balise #INSERT_HEAD dans la patie <head> de votre page, de manière à ce que le plugin puisse insérer les instructions nécessaires lui-même
  4. ajoutez la class "tablesorter" à la balise <table>

Exemple de squelette (partie tableau) :

  1. <h1>Exemple d'utilisation du plugin "tablesorter pour SPIP"</h1>
  2. <B_a>
  3. <table class="spip tablesorter" style="margin-left: 200px; width:400px">
  4.  
  5. <thead>
  6.  
  7. <tr class="row_first">
  8. <th>ID</th>
  9. <th>TITRE</th>
  10. <th>DATE</th>
  11. </tr>
  12.  
  13. </thead>
  14.  
  15. <tbody>
  16.  
  17. <BOUCLE_a(ARTICLES){0,100}>
  18.  
  19. <tr[ class="(#COMPTEUR_BOUCLE|alterner{'row_even','row_odd'})"]>
  20. <td>#ID_ARTICLE</td>
  21. <td>[(#TITRE|supprimer_numero|couper{30})]</td>
  22. <td>[(#DATE|affdate)]</td>
  23. </tr>
  24. </BOUCLE_a>
  25.  
  26. </tbody>
  27.  
  28. </table>
  29. </B_a>

Télécharger

Ce qui donne un tableau de ce style :

PNG - 12.3 ko

Options

Ne pas trier sur une ou plusieurs colonnes précises

Pour ne pas permettre de trier sur une colonne, il suffit d’ajouter la class ts_disabled sur le th de la colonne.

Limitations

Si la balise #PAGINATION est employée dans le squelette, tablesorter ne triera que la partie paginée.

Remerciements...

Merci à b_b pour le débug, à SarkaSmel et BoOz pour les propositions de noms et à xaf pour l’intégration aux tables de la partie privée...

Voir en ligne : TableSorter

Notes

[1C’est l’explication de ce logo préhistorique !

[2la version de juin 2009 correpond à Tablesorter version 2.0

Dernière modification de cette page le 22 février 2016

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 1er février à 22:14, par bcolo En réponse à : Tablesorter pour SPIP

    Bonjour

    Toujours pas de version compatible avec spip 3.1 ? J’utilise Tablesorter pour mon site qui est en spip 3.0 et que je vais mettre à jour prochainement, je teste la version 3.1 en local.

    Merci pour ce super boulot !

    Répondre à ce message

  • Le 19 mars 2014 à 09:40, par Eric En réponse à : Tablesorter pour SPIP

    Bonjour et merci pour la création de ce plugin. Ma questoin est : Est-il possible à l’aide de class dans les <th> d’ôter la possibilité de tri à des entêtes de colonnes et de remettre à zéro la présentation du tableau en cliquant sur l’entête de la première colonne (qui comporte des dates du type : du 1er janvier au 2 janvier et donc qui ne trie pas sur la date mais sur l’ordre alphabétique) ?

    • Le 19 mars 2014 à 09:41, par Eric En réponse à : Tablesorter pour SPIP

      Ok, je me répoonds à mo-même après avoir consulté la doc sur http://tablesorter.com/docs/

    • Le 7 avril 2014 à 10:38, par kris En réponse à : Tablesorter pour SPIP

      Bonjour,
      Ayant le même problème, j’ai essayé les solutions proposées dans la doc, mais sans y parvenir...
      exemple :

              // BONUS TIP: disable a column using jQuery data directly
              // but do it before the table initializes
              $("table thead th:eq(3)").data("sorter", false);

      ou

              headers: {
                // disable sorting of the third column (we start counting at zero)
                2: {
                      // disable it by setting the property sorter to false
                      sorter: false
                }
              }

      Sauriez-vous m’aider et me dire comment y parvenir ?
      Par avance merci

    • Le 7 avril 2014 à 10:48, par Eric En réponse à : Tablesorter pour SPIP

      Bonjour, en ce qui me concerne, j’ai modifié le fichier tablesorter_pipelines.php dans le répertoire /plugins/auto/tablesorter avec cette partie de code :

      function tablesorter_insert_head($flux){
              // Insertion des librairies js
              $flux .='<script src="'.find_in_path('javascript/jquery.tablesorter.js').'" type="text/javascript"></script>';
              // Init de tablesorter
              $flux .='
              <script type="text/javascript">/* <![CDATA[ */
              (function($){
                      $(function(){
                              var tablesorter_init = function(){
                                      $("table.spip").not(".ss_tablesort").each(function(){
                                              var options = {
                                              // third click on the header will reset column to default - unsorted
                                              sortReset   : true,
                                              // Resets the sort direction so that clicking on an unsorted column will sort in the sortInitialOrder direction.
                                              sortRestart : true,
                                              headers : {
                                                        0 : { sorter: "false" },
                                                        4 : { sorter: "false" },
                                                        5 : { sorter: "false" },
                                                        6 : { sorter: "false" },
                                                        7 : { sorter: "false" },
                                                        8 : { sorter: "false" },
                                                        9 : { sorter: "false" }
                                                      }                                       
                                              };
                                              if($(this).find("th.ts_disabled").size() >= 1){
                                                      options.headers = {};
                                                  $(this).find("th").each(function(index,value){
                                                      if($(this).is(".ts_disabled"))
                                                              options.headers[index] = {sorter : false};
                                                  });
                                              }
                                              $(this).tablesorter(options);
                                      });
                              }
                              tablesorter_init();
                              onAjaxLoad(tablesorter_init);
                      });
              })(jQuery);
              /* ]]> */</script>';
             
              $flux .= tablesorter_insert_head_css(''); // compat pour les vieux spip
              return $flux;
      }

      J’espère que cela t’aidera pour configurer tes tableaux.

    • Le 7 avril 2014 à 12:45, par kris En réponse à : Tablesorter pour SPIP

      Merci de ta réponse Eric, mais après avoir modifié le fichier comme suit, aucun changement (vidé le cache, désactivé et réactivé le plugin, ....) :

                                              var options = {
                                             // third click on the header will reset column to default - unsorted
                                             sortReset   : true,
                                             // Resets the sort direction so that clicking on an unsorted column will sort in the sortInitialOrder direction.
                                             sortRestart : true,
                                             headers : {
                                                       2 : { sorter: "false" }
                                                     }
                                                                      };

      Ma 3e colonne est toujours « sortable » !!
      Tu n’aurais rien ajouté au html des fois ?

    • Le 7 avril 2014 à 13:19, par Eric En réponse à : Tablesorter pour SPIP

      Non, je n’ai rien ajouté... as-tu un lien vers lequel je peux essayer de t’aider ?

    • Le 27 mai 2015 à 11:32, par kent1 En réponse à : Tablesorter pour SPIP

      Je réponds très tard parce que je regardais ce forum mais c’est possible sur les dernières versions du plugin

      En ajoutant la class ts_disabled sur le th sur lequel on souhaite ne pas pouvoir trier

    • Le 27 mai 2015 à 11:35, par kent1 En réponse à : Tablesorter pour SPIP

      Je l’ai rajouté à la documentation

    Répondre à ce message

  • Le 6 mai 2014 à 14:42, par arriflex En réponse à : Tablesorter pour SPIP

    Bonjour,

    Connaissez-vous une incompatibilité de tablesorter avec d’autres plugins ?

    Je n’arrive pas à le faire fonctionner sous SPIP 3.0.16 [21266].

    Le plugin est installé, cache vidé. L’appel du fichier .js à bien lieu et mon code spip est celui de l’exemple

    <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>

    Sauriez-vous d’où peut venir le problème ?

    Merci d’avance !

    • Le 13 mai 2014 à 15:39, par arriflex En réponse à : Tablesorter pour SPIP

      Bonjour à vous,

      Je n’ai pas réussi à résoudre mon problème tout seul, si jamais quelqu’un à un piste je suis très preneur !

      Merci d’avance

    Répondre à ce message

  • Le 15 septembre 2009 à 17:59, par Arnaud B. En réponse à : Tablesorter pour SPIP

    Les deux derniers post qui exposait le traitement auto de tableaux étant peut explicite ou pas a jour : le fichier entete.html n’éxistant plus dans la version actuelle du plugin, je me permet de poster la solution que j’ai trouvée et qui marche (apparement lol ).

    pour que les tableaux Spip qui sont dans l’espace publique soient géré automatiquement par tablesorter et que les flèches s’affiche tout bien comme il faut :.

    Modif du fichier tablesorter.css

    Faire un rechercher/remplacer avec votre éditeur préféré : tablesorter/spip

    ce qui donne :

    /* tables */
    table.spip {}

    table.spip td,
    table.spip th {
            vertical-align: middle !important;
    }

    table.spip th {
            text-align:center;
    }

    td.modele {
            font-weight: bold;
    }
    td.fiche {
            text-align:center;
    }

    table.spip thead tr .header {
            background-color: transparent;
            background-image: url("../images/bg.gif");
            background-repeat: no-repeat;
            background-position: center right;
            cursor: pointer;
    }

    /* annulation du survol et fleche enlevee pour les zones non cliquables */
    table.spip thead tr th.none {
            background-image: none;
            cursor: auto;
            /*
            background-color: #da0000;
            */
    }

    table.spip tbody td {
            padding: 4px;
            /*
            background-color: #fff;
            */
            vertical-align: top;
    }
    table.spip tbody tr.odd td {
            /*
            background-color:#f0f0f6;
            */
    }

    table.spip thead tr .headerSortDown,
    table.spip thead tr .headerSortUp {
            background-repeat: no-repeat;
            background-position: center right;
            /*
            background-color: #666;
            color: #fff;
            */
    }
    table.spip thead tr .headerSortUp {
            background-image: url("../images/asc.gif");
    }
    table.spip thead tr .headerSortDown {
            background-image: url("../images/desc.gif");
    }
    .pager {
            clear:both;
            border:2px dashed red;
    }

    j’ai modifié aussi tablesorter_pipeline.php en rajoutant un domReadyFunction comme le conseille la doc de tablesorter :

    function tablesorter_header_prive($flux){
            // Insertion des librairies js
            $flux .='<script src="'.url_absolue(find_in_path('scripts/jquery.tablesorter.js')).'" type="text/javascript"></script>';
            // Inclusion des styles du plugin
            $flux .='<link rel="stylesheet" href="'.url_absolue(find_in_path('styles/tablesorter.css')).'" type="text/css" />';
            // Init de tablesorter
            $flux .='
            <script type="text/javascript">/* <![CDATA[ */
            (function($){
                    $(function(){
                            $("table.spip").tablesorter();
                    });
            })(jQuery);
            /* ]]> */</script>';
            return $flux;
    }
    • Le 17 juillet 2013 à 20:47, par flohier En réponse à : Tablesorter pour SPIP

      Merci bien pour cet ajout ! Dans mon cas, la seule modification du fichier tablesorter.css a suffit.
      A quoi sert la modification du fichier tablesorter_pipeline.php ?

    Répondre à ce message

  • Le 31 janvier 2013 à 14:43, par François Daniel Giezendanner En réponse à : Tablesorter pour SPIP

    Bonjour,

    Ce plugin fonctionne parfaitement sous :

    SPIP 2.1.19 [19922] Sarka-SPIP 3.0.4 [40664]

    Aprè migration sous :

    SPIP 3.0.5 [19905] Sarka-SPIP 3.2.21 [69423]

    la fonction tri disparait !

    As-tu une explication ?

    Cordialement

    FDG

    Répondre à ce message

  • Le 15 mars 2012 à 16:03, par clem En réponse à : Tablesorter pour SPIP

    Bonjour,

    J’utilise ce plugin qui fonctionne trés bien, merci.

    je cherche la possibilité de filtrer les résultats, une idée ?

    Merci

    Clem

    • Le 15 mars 2012 à 16:12, par Cyril Marion En réponse à : Tablesorter pour SPIP

      Bonjour,

      pour filtrer au lie de trier, je ne vois que la possibilité de faire précéder le bloc de résultats d’un mini-formulaire de recherche, avec des input ou des select pour spécifier la valeur du ou des filtres, puis dans le squelette modifier les boucles pour qu’elles prennent la ou les valeurs du filtre en tant que critère. Cela passe par un peu de programmation SPIP (programmation de « squelettes »).

    Répondre à ce message

  • Le 15 mars 2010 à 18:05, par Yffic En réponse à : Trier les dates et tailles SPIP

    Le tri sur les dates spip ne fonctionne pas si on veut affiche une date « lisible » avec le filtre |affDate. De même pour le poids des fichiers si on utilise le filtre |taille_en_octets... Ca peut se contourner en utilisant cette possibilité du plugin « Dealing with markup inside cells » :

    On utilise simplement un span invisible pour le parser

    <script type="text/javascript">
    <!--
    $(document).ready(function() {
       // call the tablesorter plugin
       $("mytablesorter").tablesorter({
           // define a custom text extraction function
           textExtraction: function(node) {
               // extract data from markup and return it  
               return node.childNodes[0].innerHTML;
           }
       });
    });
    -->               
    </script>

    <table class="spip mytablesorter tablesorter" >
      <thead>
         <tr class="row_first">
            <th class="{sorter: 'digit'}"><:doctaille:></th>
            <th class="{sorter: 'isoDate'}"><:docdate:></th>
         </tr>
      </thead>

      <tbody>
         <BOUCLE_ligne(DOCUMENTS) {id_rubrique} {mode=document} {par titre}{doublons}>
         <tr[ class="(#COMPTEUR_BOUCLE|alterner{'row_even','row_odd'})"]>
            <td><span style="display:none">#TAILLE</span>[(#TAILLE|taille_en_octets)]</td>
            <td><span style="display:none">[(#DATE|affdate{'Y-m-d'})]</span>[(#DATE|affdate)]</td>
         </tr>
         </BOUCLE_ligne>
                           
      </tbody>
    </table>

    Si ca peut servir...

    • Le 28 février 2012 à 01:02, par Jérémy En réponse à : Tablesorter pour SPIP

      Merci pour l’info, en effet, ça peut servir !

      Mais est-il possible d’obtenir le même effet, avec des dates entrées par les rédacteurs dans un article standard de spip ?
      L’insertion de la balise est alors impossible... Ou alors je ne sais pas faire !

      Y’a t’il au moins une syntaxe de date qui fonctionne pour le tri ?
      Y’a t’il moyen d’afficher les dates d’une manière lisible mais également triable dans un simple tableau d’article SPIP ?

      Merci d’avance !

    Répondre à ce message

  • Le 31 décembre 2010 à 17:00, par DrFred59 En réponse à : Tablesorter pour SPIP

    Bonjour,
    Est il possible d’utiliser le plugin avec la version spip 2.1.2 ? (+ sarkaspip 3.0.4)
    Et dans l’affirmative, quels sont les fichier à modifier ? (je ne trouve ni entete.html niinc-css-common.css.html)
    J’ai déjà passé 2 heures à essayer de trouver un moyen pour faire fonctionner ce plugin super intéressant, mais là j’abandonne, mes connaissances sont trop limitées...

    Répondre à ce message

  • Le 27 décembre 2009 à 15:20, par ? En réponse à : Tablesorter pour SPIP

    J’ai choisi d’installer le squelette Simple magasine et ce plugin est obligatoire . J’ai installé les plugins nuage et nombre de visiteurs connectés , facile avec la gestion des plugins de spip 2.0 .

    Je n’ai pas bien compris comment on installe ce plugin . Faut-il constituer un dossier pour le placer après l’avoir téléchargé depuis la zone ?

    Merci pour vos aimables réponses .

    Christophe .

    • Le 27 décembre 2009 à 17:46, par ? En réponse à : Tablesorter pour SPIP

      Finalement , j’ai placé le dossier dans le répertoire plugins et ça a l’air d’aller .

      Je n’ai pas de tableau pour l’instant mais ça n’a pas tout fichu en l’air .

      Excusez pour la question inutile .

      Christophe .

    Répondre à ce message

  • Le 6 juillet 2009 à 14:14, par Joseph En réponse à : Tableau dans un article

    Merci pour cet article très intéressant. Est-il possible d’utiliser ce script sur des tableaux inclus dans un article à l’aide des raccourcis typographiques usuels ?

    | {{col1}} | {{col2}} |
    | a | b |
    | c | d |
    • Le 31 août 2009 à 15:11, par ? En réponse à : Tableau dans un article

      Oui tu le peux

      modifie entete.html et inc-css-common.css.html comme sur l’image ci-joint.
      vérifier la localisation des fichiers/images par rapport à ton arborescence .

      La ligne :
      $(document).ready(function()
      $("table").tablesorter(widgets : [’zebra’]) ;
      implique tous les
      « div class="" » « table class="spip" »
      sont interprétés par tablesorter

      ++

      PNG - 62.2 ko
    • Le 31 août 2009 à 15:16, par ? En réponse à : Tableau dans un article

      ci-jointe, PB site commentaire avec des chevrons (greater than, lower than)
      ...

      PNG - 28.6 ko
    • Le 31 août 2009 à 15:17, par ? En réponse à : Tableau dans un article

      ci-jointe, PB site commentaire avec des chevrons (greater than, lower than) ...

      PNG - 9.4 ko

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Mailsubscribers

    16 janvier 2013 – 274 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

  • noiZetier v2

    9 novembre 2012 – 36 commentaires

    Le noiZetier offre une interface d’administration permettant d’insérer au choix des éléments modulaires de squelettes (noisettes) et de les ajouter ainsi à ses squelettes. Compatibilité La version 2 du noizetier fonctionne sous SPIP 3. Elle est (...)

  • cirr : plugin « rédacteur restreint »

    29 octobre 2010 – 60 commentaires

    Ce plugin « cirr : rédacteur restreint » permet d’affecter des rubriques aux rédacteurs et modifie les droits afin qu’un rédacteur restreint (ou un administrateur restreint) voit dans l’espace privé uniquement les rubriques qui lui sont affectées (et leur (...)

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

Ça spipe par là