Ajouter des possibilités de tri des tableaux avec l’extension JQuery TableSorter

Un des usages courants des mini-applications est de proposer des tableaux plus complexes que ceux disponibles par défaut. Une fonction utile est de pouvoir trier le tableau suivant les différentes colonnes. Cette fonction est possible grâce à l’extension TableSorter (voir son site sur Github) disponible dans BDF (elle est utilisée pour l’affichage HTML des tableaux).

La procédure pour l’inclure dans une mini-application est la suivante (il n’est pas possible ici d’aborder toutes les possibilités offertes par cette extension, on se référera à la documentation officielle) :

Inclure TableSorter dans la mini-application

Dans le fichier de configuration app.ini de l’application, il faut ajouter tablesorter à la liste des extensions JQuery

core_jqueryextensions=tablesorter

TableSorter propose des thèmes (disponibles dans les ressources dans third-lib/jquery/tablesorter/), il est possible d’inclure celui de son choix en l’indiquant après tablesorter séparé avec un tiret (il faudra la déclarer par la suite).

TableSorter fonctionne également avec des extensions appelées widgets, certaines de ces extensions sont comprises dans le fichier principal, d’autres peuvent être chargées comme autre extension JQuery appelée tablesorter.widgets.

core_jqueryextensions=tablesorter-blue,tablesorter.widgets

Utilisation dans le code Javascript

L’application de TableSorter à un table est très simple. Important : il faut que la table HTML

  $table.tablesorter();

$table fait référence à une table HTML qui doit avoir des éléments <tbody> et <thead>. $table peut très bien faire référence à plusieurs tables.

De nombreuses options sont disponibles en argument. Notamment, si un thème est utilisé, il faut le déclarer ici.

  $table.tablesorter({
      theme: "blue",
      widgets: ['zebra']
    });

Dans l’exemple précédent, nous avons également la déclaration de l’extension zebra qui permet d’avoir une alternance de couleur entre lignes paires et impaires.

Quelques éléments de configuration

La documentation de l’extension est très riche. Voici quelques élements utiles :

• Une cellule de l’entête (élément <th> sera exclue du tri si elle a l’attribut @data-sorter="false" (voir l’exemple sur le site)

• Pour indiquer une autre valeur pour le tri que le contenu de la cellule, il faut que l’élément <td> aie un attribut @data-text, cette option est très utile pour les dates et les montants monétaires pour s’assurer que le tri ne se fera pas par ordre alphabétique. Par exemple, on mettra la valeur numérique du montant dans l’attribut @data-text

• Les cellules vides sont placées par défaut en bas de tableau, ce comportement peut être changé avec l’option emptyTo, voir l’exemple sur le site).

CSS minimal

Les thèmes proposés par TableSorter sont commodes mais peuvent interférer avec d’autres besoins de mise en forme. On peut se dispenser de thème et, d’expérience, le CSS minimal à introduire pour avoir les flèches de tri est le suivant :

/* header */

.tablesorter-custom .header,
.tablesorter-custom .tablesorter-header {
  /* black (unsorted) double arrow */
  background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
  /* white (unsorted) double arrow */
  /* background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAAP///////yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==); */
  background-repeat: no-repeat;
  background-position: center right;
  padding-right: 18px;
  white-space: normal;
  cursor: pointer;
}
.tablesorter-custom .headerSortUp,
.tablesorter-custom .tablesorter-headerSortUp,
.tablesorter-custom .tablesorter-headerAsc {
  /* black asc arrow */
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
  /* white asc arrow */
  /* background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7); */

}
.tablesorter-custom .headerSortDown,
.tablesorter-custom .tablesorter-headerSortDown,
.tablesorter-custom .tablesorter-headerDesc {
  /* black desc arrow */
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
  /* white desc arrow */
  /* background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7); */

}
.tablesorter-custom thead .sorter-false {
  background-image: none;
  cursor: default;
}

/* tfoot */
.tablesorter-custom tfoot .tablesorter-headerSortUp,
.tablesorter-custom tfoot .tablesorter-headerSortDown,
.tablesorter-custom tfoot .tablesorter-headerAsc,
.tablesorter-custom tfoot .tablesorter-headerDesc {
  /* remove sort arrows from footer */
  background-image: none;
}

Il faudra charger TableSorter sans thème :

core_jqueryextensions=tablesorter

Et lui indiquer le style custom (le nom du style est suffixé aux classes CSS).

  $table.tablesorter({
      theme: "custom"
    });