Section courante

A propos

Section administrative du site

Description

Cette bibliothèque permet de trier par colonne un tableau comme le fait par exemple une application Excel. Elle est contenu dans un fichier unique JavaScript «tinysort.js» développé par Ron Valstar (Sjeiti). Elle ne nécessite pas l'utilisation de jQuery, mais on peut le combiner avec afin de minimiser le nombre de lignes de code nécessaires à son utilisation.

La fonction «tinysort»

Cette fonction permet de relier la balise HTML à la bibliothèque de triage.

Syntaxe

function tinysort(NodeList);
function tinysort(NodeList,option);

Paramètres

Nom Description
NodeList Ce paramètre permet d'indiquer la liste de noeud où est situé la balise à trier.
option Ce paramètre permet d'indiquer les options :
Options Description
selector Cette option permet d'indiquer le sélecteur CSS de l'élément à trier.
order Cette option permet d'indiquer l'ordre du tri à appliquer : asc (ascendant), desc (descendant) ou rand (aléatoire).
attr Cette option permet d'indiquer l'ordre de la valeur d'attribut.
data Cette option permet d'indiquer l'ordre de la donnée d'attribut.
place Cette option permet d'indiquer l'emplacement des éléments à ordonner dans le respect des éléments désordonnées.
useVal Cette option permet d'indiquer la valeur d'élément dans le texte.
cases Cette option permet d'indiquer s'il faut distinguer les minuscules et les majuscules dans le tri (true) ou non (false).
forceStrings Cette option permet d'indiquer s'il faut trier en fonction selon des chaines de caractères (true) ou des nombres (false).
ignoreDashes Cette option permet d'indiquer s'il faut ignorer le tiret quand une vérification par nombre est effectué.
sortFunction Cette option permet d'indiquer une fonction utilisateur à utiliser pour le tri.
useFlex Cette option permet d'indiquer si un parent est présent et qu'il affiche un Flex alors la commande se fait par le CSS au lien du DOM.
emptyEnd Cette option permet d'indiquer qu'il faut trier les valeurs vides à la fin plutôt qu'au début de la liste.

Exemple

Voici un exemple montrant comment faire trier un tableau en cliquant sur le titre des colonnes :

  1. <html>
  2. <head>
  3.      <script type="text/javascript" src="tinysort/tinysort.js"></script>
  4.      <style>
  5.           #ListCoder th { cursor:hand; }
  6.      </style>
  7. </head>
  8. <body>
  9.      <table id="ListCoder">
  10.           <tr>
  11.                <th>Cin</th>
  12.                <th>WorkGroupId</th>
  13.                <th>Name_EN</th>
  14.                <th>Name_FR</th>
  15.                <th>Description</th>
  16.                <th>Status</th>
  17.           </tr>
  18.           <tr>
  19.                <td>000</td>
  20.                <td>0000023901</td>
  21.                <td>Coder</td>
  22.                <td>Développement</td>
  23.                <td>Groupe de programmeur effectuant de la recherche et développement (R&D).</td>
  24.                <td>A</td>
  25.           </tr>
  26.           <tr>
  27.                <td>000</td>
  28.                <td>0000023902</td>
  29.                <td>Maintenance</td>
  30.                <td>Maintenance</td>
  31.                <td>Groupe maintenant les divers services réseaux, implantant les développements, maintenant l'état actuel du matériel et administrant les accès.</td>
  32.                <td>A</td>
  33.           </tr>
  34.           <tr>
  35.                <td>000</td>
  36.                <td>0000023903</td>
  37.                <td>Direction</td>
  38.                <td>Direction</td>
  39.                <td>Direction Groupe de travail s'occupant des divers orientations à prendre sur les projets et les produits.</td>
  40.                <td>I</td>
  41.           </tr>
  42.           <tr>
  43.                <td>075</td>
  44.                <td>0000000068</td>
  45.                <td>Test</td>
  46.                <td>Teste</td>
  47.                <td>Groupe désigné pour le contrôle de la Qualité</td>
  48.                <td>A</td>
  49.           </tr>
  50.      </table>
  51.      <script type="text/javascript">
  52.      var table = document.getElementById('ListCoder');
  53.      table.addEventListener('click',function(e){
  54.           var tableHeader = e.target,order;
  55.           if(tableHeader.nodeName == 'TD') return;
  56.           while (tableHeader.nodeName!=='TH') tableHeader = tableHeader.parentNode;
  57.           order = tableHeader.getAttribute('data-order')==='asc'?'desc':'asc';
  58.           tableHeader.setAttribute('data-order',order);
  59.           tinysort(table.querySelectorAll('tr'),{ selector:'td:nth-child('+(Array.prototype.indexOf.call(table.querySelectorAll('th'),tableHeader)+1)+')',order: order});
  60.      });
  61.      </script>
  62. </body>
  63. </html>

on obtiendra le résultat suivant :



Dernière mise à jour : Mercredi, le 28 octobre 2015