SPIP-Contrib

SPIP-Contrib

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

273 Plugins, 191 contribs sur SPIP-Zone, 139 visiteurs en ce moment

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

Tablesorter pour SPIP

6 juillet 2009 – par Cyril Marion – 10 <blink style='color:red;'>public|spip|ecrire:commentaires</blink>

9 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 class CSS "tableseorter" attribuée à un élément <table>. 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) :

Ce qui donne un tableau de ce style :

PNG - 12.3 ko

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

Retour en haut de la page

Vos commentaires

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

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

    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

  • Le 6 juillet 2009 à 19:55, par Cyril Marion En réponse à : Tablesorter pour SPIP

    Dans cette version du plugin il faut ajouter la class « tablesoreter » à la main dans les balises <table> des squelettes. On doit pouvoir faire évoluer le plugin pour qu’il ajoute automatiquement la class « tablesorter » à tous les tableaux possédant déja la class « spip ».

    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

  • Brownygreen

    3 février – <blink style='color:red;'>public|spip|ecrire:commentaire</blink>

    Un thème simple de couleur marron et vert, en largeur fixe, constitué de 2 colonnes avec une en-tête facilement personnalisable. Présentation Adaptation de Versatility par E-cosystems. Si vous utilisez le plugin Menus, une navigation principale (...)

  • Corbeille

    2 novembre 2008 – 27 <blink style='color:red;'>public|spip|ecrire:commentaires</blink>

    Un plugin pour retrouver les éléments supprimés dans la corbeille.

  • Formulaire de contact libre

    27 avril 2011 – 35 <blink style='color:red;'>public|spip|ecrire:commentaires</blink>

    Dans SPIP il n’y a pas un formulaire de contact, mais autant de formulaires de contact que d’auteurs. Cette phrase de Romy, dans son article Une page de contact dans mon SPIP, pointe un petit manque de SPIP. La possibilité d’insérer rapidement un (...)

  • Typographie avancée

    3 mars 2010 – <blink style='color:red;'>public|spip|ecrire:commentaires</blink>

    « Typographie avancée » active automatiquement un grand nombre d’automatismes destinés à affiner la typographie des textes produits par SPIP. Nécessite PHP 5 au minimum. « Typographie avancée » est l’adaptation, pour SPIP, de la classe « PHP Typography », (...)

  • Plugin Convertisseur

    24 février 2008 – 15 <blink style='color:red;'>public|spip|ecrire:commentaires</blink>

    Convertit différents formats d’articles (wiki, docx, pdf, etc..). en format SPIP (texte avec les raccourcis typographiques SPIP)