Réaliser un tableau dynamique trié et paginé avec jQuery

Publié le 26 juin 2008 par Dator

De nos jours, avoir une liste d’éléments dans un tableau est courant mais très peu de site propose de trier chaque colonne et d’avoir une pagination digne de ce nom !

jQuery, la librairie javascript orienté objet, va nous offrir une solution (vous pouvez tout à fait réaliser un tableau dynamique trié et paginé avec PHP ou Ruby mais c’est plus contraignant, surtout quand vous allez voir le nombre de ligne de code dont on a besoin avec le Javascript).

Préparatifs

Dans un premier temps, il faut aller chercher jQuery et le plugin pour le tableau :

  • jQuery
  • TableSorter
  • Pagination pour le TableSorter
  • Le CSS pour le tableau

Il faut bien entendu inclure tout ces éléments dans votre page HTML avant de pouvoir les utiliser.

Création du tableau

La construction du tableau se passe uniquement au niveau du HTML, ce qui permet d’être très modulation et le couplé à PHP par exemple.


# Titre Date

1 mon titre 1 10/12/1987

2 mon titre 2 11/12/1987

3 mon titre 3 12/12/1987

4 mon titre 4 13/12/1987

10 20 30 40

Dans le code HTML, les class sont très importantes, ce sont elles qui vont ajouter le CSS au tableau et amorcer le Javascript !

Vous pouvez ajouter autant d’éléments que vous voulez et autant de lignes que vous voulez.

Le code Javascript

Un peu de javascript ne fait pas de mal et la c’est encore plus notable, car il vous faut … 4 lignes de codes pour faire ce que vous voulez !

$(document).ready(function() {
    // On créer notre tablesorter sur l'id mytable
    // Et on trie (au départ) par la première colonne
    $("#mytable").tablesorter({sortList:[[0,0]], widgets: ['zebra']})
    .tablesorterPager({container: $(”#pager”)});
    // On ajoute la pagination sur l’id #pager
});

On obtient très facilement le résultat que nous souhaitons et cela de façon rapide et très efficace.


Mots-clés : jQuery, HTML, Javascript