datatables

Connaissez-vous jQuery Datatables ? Il s’agit d’un plugin créé par Allan Jardine qui permet de transformer vos tableaux htlm statiques en tableaux dynamiques. Le plugin offre des fonctionnalités de pagination, de recherche, de tri, de filtre, d’internationalisation, d’export…

Je vais dans cet article parler de la possibilité de filtrer de données par colonnes.

Par défaut, cette fonctionnalité n’existe pas. Il existe certains articles  qui nous donnent des pistes ainsi que des plugins :

N’étant pas satisfait de ces solutions, j’ai implémenté mon propre plugin, simple d’utilisation et qui intègre les styles Bootstrap.

L’idée est de proposer les filtres en haut du tableau et de pouvoir configurer certains points

  • Permettre l’affichage ou non du filtre grâce à l’option searchable
  • Permettre de choisir le type d’input du filtre grâce à l’option searchtype (qui peut, pour le moment, prendre les valeurs suivantes : text ou select)
    Je travaille à ajouter des types d’input afin de donner plus de possibilités de filtrage.

Voici le rendu final :

Le plugin est hébergé sur GitHub : https://github.com/aboursin/datatables.filters

Une fois qu’il est fait référence au .js et au .css il suffit d’activer les filtres de la manière suivante : maDataTable.filtersOn();

A vous de jouer !

Publicités