Tablesorter pour SPIP

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

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

Ce qui donne un tableau de ce style :

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

Notes

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

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

Discussion

16 discussions

  • Bonjour,

    J’ai récupéré des fichiers js/css du lien fourni par MM, j’ai fait 2-3 ajustements dans le PHP, modifié les bornes dans les XML et j’ai baptisé ça TableSorter 2.0.0 et je l’ai installé dans un site ...ça marche dans un intranet sur une table de 8500 lignes (!!) mais c’est vraiment fait à l’arrache sans plus de contrôle que ça donc je pense qu’il faudrait que plus de monde teste ... j’ai malheureusement pas trop le temps en cette fin d’année pour affiner ... :-(

    Mais à la limite si quelqu’un veut un zip de mon dossier TableSorter 2 pour tester ... sans absolument aucune garantie que ça n’explosera pas tout, vous êtes prévenus !

    C’est bien évidemment pas sur un dépôt, juste ici chez moi, jamais mis un truc sur la zone donc faudrait me que je m’y penche ce qui est encore un autre problème :-)

    Répondre à ce message

  • 2

    Apparemment incompatible 3.2.

    • Tu as testé ?

      Je pense qu’il faut changer la lib qui n’est plus maintenue, mais un fork (https://github.com/Mottie/tablesorter) l’est (actuellement en v2.29.0). Une pull-request est en attente pour la compatibilité parfaite avec jQuery 3.x (mais avec le jquery-migrate intégré à SPIP 3.2, ça devrait passer aussi sans cette modification)

    • Je n’ai pas tout compris, mais je constate que sur mon site, le tri des tableaux marchait jusqu’à Spip 3.1 et plus depuis le passage à Spip 3.2.

    Répondre à ce message

  • Bjr,

    Ce plugin est signalé comme incompatible SPIP 3.2.0

    Une MàJ est-elle prévue ?

    Répondre à ce message

  • Bonjour,

    Après plusieurs essais, je propose une solution pour créer un tableau « triable » à partir d’un fichier CSV

    2° partie

    Répondre à ce message

  • Bonjour,

    Après plusieurs essais, je propose une solution pour créer un tableau « triable » à partir d’un fichier CSV
    1° partie.

    Désolé de ne pouvoir donner le code en clair. le code < h t m l > n’est pas accepté.

    Je peux envoyer le fichier .pdf en privé.

    Répondre à ce message

  • 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

  • 7

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

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

    • 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

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

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

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

    • 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

    • Je l’ai rajouté à la documentation

    Répondre à ce message

  • 1
    arriflex

    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 !

    • arriflex

      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

  • 1

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

  • 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

Ajouter un commentaire

Qui êtes-vous ?
  • [Se connecter]

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom

Dernière modification de cette page le 20 février 2018