Aujourd’hui, je vous présente deux petits outils qui amélioreront de façon très simple vos tableaux html : sorttable et tablefilter

Sorttable

Sous licence X11, cette bibliothèque javascript développée par Stuart Langridge (kryogenix.org) permet de trier vos tableaux html.

Son utilisation est très simple :

  1. télécharger la bibliothèque
  2. l’appeler dans le <head> de la page html :
    <script src="sorttable.js"></script>
  3. ajouter au tableau qu’on veut trier la classe « sortable » :
    <table class="sortable">

Et c’est tout : il suffit désormais de cliquer sur l’en-tête d’une colonne pour effectuer le tri (et cliquer une deuxième fois pour effectuer le tri inverse).

Il y a d’autres options (numéroter les lignes, afficher une icône…), je vous invite à consulter le site du projet pour en savoir plus.

Exemple sur JSFiddle

Tablefilter

Également sous licence MIT, cette bibliothèque (téléchargeable sur GitHub) ajoute au-dessus de chaque colonne de votre tableau une zone permettant de filtrer selon le texte saisi.

Son utilisation est très simple aussi :

  1. télécharger la bibliothèque (NB : on peut aussi faire un appel au CDN indiqué sur la page du projet)
  2. l’appeler dans le <head> de la page html :
    <script src="path/to/my/scripts/tablefilter/tablefilter.js"></script>
  3. dans le <body>, donner un id au tableau :
    <table id="table1">
  4. ajouter après le tableau le code suivant :
    <script language="javascript" type="text/javascript"> 
     var filtersConfig = {
     base_path: 'path/to/my/scripts/tablefilter/' };
     var tf = new TableFilter('table1', filtersConfig);
     tf.init();
     </script> 

Il y a des tas d’options (à mettre après le base_path), notamment pour spécifier le type de données de chaque colonne, transformer le champ de saisie en liste déroulante… ; je vous invite à consulter la page d’exemples, très bien faite :

  • filtrage automatique au fur et à mesure qu’on tape :
    auto_filter: {delay: 500 //milliseconds}
  • liste déroulante plutôt que zone de saisie :
    col_0: 'select'
  • affichage du nombre de lignes :
    rows_counter: true
  • popups pour les zones de saisie :
    popup_filters: true
  • bouton pour vider les filtres :
    btn_reset: true
  • etc…

Exemple sur JSFiddle

Publicités