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

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