news_default

Ce plugin très simple d’utilisation permet de filtrer les données d’un tableau HTML. Pour mettre en place ce plugin, rien de plus simple, commencez par télécharger la dernière version de JQuery (aujourd’hui la 1.5.1)  sur le site http://jquery.com/ et ajouter le fichier à vos pages :

<script type="text/javascript" src="js/jquery.js"></script>
Ensuite créez votre tableau HTML :
<table id= ‘tableau_filtre’>
   <thead>
      <tr>
        <td>Colonne 1</td>
        <td>Colonne 1</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Donnée 1</td>
         <td>Donnée 2</td>
     </tr>
   </tbody>
</table>
Attribuez un identifiant à votre tableau pour pouvoir le cibler avec le JavaScript.
Pour notre exemple, nous avons choisi tableau_filtre.

Attention ! Votre tableau doit avoir la même structure que le tableau si dessus, si vous enlevez les balises thead et tbody le plugin ne fonctionnera plus.

Petit rappel sur les balises thead, tbody e tfoot : Ces balises servent à structurer un tableau, de telle sorte que <thead> va représenter l’entête du tableau, comme le nom des colonnes, <tbody> représente l’ensemble des données et enfin <tfoot> représentera une légende de tableau.

Ensuite, vous n’avez plus qu’à insérer le code suivant dans la balise <head> de votre fichier HTML/PHP :
$(document).ready(function() {
$('#tableau_filtre).tableFilter();
});
Ce code attribut au tableau portant l’identifiant tableau_filtre la fonction tableFilter().

Voici un exemple du résultat obtenu avec ce code : http://www.picnet.com.au/resources/tablefilter/demo.htm Vous pouvez télécharger le plugin sur le site officiel : http://www.picnet.com.au/picnet_table_filter.html

Laisser un commentaire