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
- installez le plugin à partir de son emplacement sur la zone
- dans vos pages, structurez les tableaux auxquels vous souhaitez ajouter les possibilités de tri en utilisant les balises
<thead>,<tbody> et <th> - prenez garde à maintenir la balise
#INSERT_HEADdans la patie<head>de votre page, de manière à ce que le plugin puisse insérer les instructions nécessaires lui-même - ajoutez la class "tablesorter" à la balise
<table>
Exemple de squelette (partie tableau) :
Ce qui donne un tableau de ce style :
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...




tablesorter.zip
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
++
# 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)
...
# 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) ...
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