{Benjamin PREVOT}

Pagination d'un tableau avec MooTools

MooToolsNous allons voir comment mettre en place rapidement un système de pagination pour les tableaux réutilisable et non intrusif.

Prérequis

Pour pouvoir mettre en place la pagination du tableau, nous utiliserons la librairie MooTools que vous pouvez télécharger sur le site officiel http://www.mootools.net/. Cet article a été écrit en utilisant la version 1.11 de MooTools.

Création de la classe Pagination

Nous allons créer une classe qui va nous permettre de manipuler un tableau afin de gérer la pagination. Pour cela, nous utilisons la syntaxe que MooTools a mise à notre disposition.

Tout d'abord, créons le gabarit de la classe dans le fichier /js/pagination.js :

var Pagination = new Class({
	// Le contenu de notre classe
});

Le but de cet article n'étant pas de décrire le fonctionnement de MooTools pour créer des classes, vous pouvez vous reporter à la documentation du site officiel : http://docs.mootools.net/Class/Class.js#Class.

Mise en place du constructeur

Maintenant, il faut définir le constructeur afin de pouvoir utiliser notre classe :

Class Pagination
var Pagination = new Class({
	options: {
		currentPage: 0,
		lines: 5
	},
 
	initialize: function(table, options) {
		this.table = table;
		this.setOptions(options);
	}
});
 
Pagination.implement(new Options);

Attardons-nous un moment sur ces nouvelles informations.

Dans options, nous définissons 2 valeurs :

  • currentPage : le numéro de la page affichée à l'écran ; par défaut, elle vaut 0 (la première page)
  • lines : le nombre de lignes affichées dans une page ; par défaut, 5 lignes par page

Dans la méthode initialize (le constructeur), nous récupérons 2 paramètres :

  • table : la table HTML pour lequel nous mettons en place la pagination
  • options : des options supplémentaires que nous souhaitons renseigner, comme le nombre de ligne par page ou la page courante par défaut

Comme ci-dessus, nous ne nous attarderons pas sur la syntaxe de implement ; pour plus de détails, http://docs.mootools.net/Class/Class.js#Class.implement.

Initialisation et affichage

Nous allons maintenant créer 2 méthodes afin

  • d'initialiser et de calculer certaines valeurs que nous utiliserons dans notre code
  • d'afficher / masquer les lignes du tableau

Initialisation des données

Lors de l'initialisation, nous stockons 2 informations importantes : les lignes du tableau et le nombre de pages maximum. Ces informations sont calculées dans la méthode _init suivante :

Initialisation
_init: function() {
	this.rows = $ES('tbody tr', this.table);
	this.countPages = Math.ceil(this.rows.length / this.options.lines);
}

La première ligne permet de récupérer les lignes contenues dans le tableau.

La seconde calcule le nombre de pages maximum.

Affichage / masquage des lignes

Pour gérer l'affichage des lignes du tableau, nous créons une autre fonction :

Gestion de l'affichage des lignes
_display: function() {
	this.rows.each(function(row, index) {
		if (index < this.options.lines * this.options.currentPage) {
			row.setStyle('display', 'none');
		} else if (index > this.options.lines * (this.options.currentPage + 1) - 1) {
			row.setStyle('display', 'none');
		} else {
			row.setStyle('display', 'table-row');
		}
	}.bind(this));
}

Cette fonction itère sur toutes les lignes du tableau et gère l'affichage / le masquage des lignes en fonction de la position de chacune dans le tableau : si la ligne fait partie de la page courante, elle est affichée (row.setStyle('display', 'table-row')), sinon elle est masquée (row.setStyle('display', 'none')).

Premiers appels

Maintenant que nos 2 méthodes sont définies, il faut les appeler dans le constructeur afin d'initialiser la pagination ; le constructeur devient :

Constructeur
initialize: function(table, options) {
	this.table = table;
	this.setOptions(options);
 
	this._init();
	this._display();
}

Navigation entre les pages

En l'état, il est possible d'utiliser notre classe de pagination, mais vous pouvez remarquer qu'il est encore impossible de naviguer entre les différentes pages. Nous allons donc écrire 5 nouvelles méthodes :

  • goToPage : permet d'accéder directement à une page précise
  • previousPage : va à la page précédente de la page courante
  • nextPage : va à la page suivante de la page courante
  • firstPage : va à la première page
  • lastPage : va à la dernière page

Comme vous pouvez vous en douter, nous écrivons d'abord la méthode goToPage afin de la réutiliser dans les autres méthodes de navigation :

Navigation vers une page
goToPage: function(page) {
	if (page < 0 || page > this.countPages - 1) return;
 
	this.options.currentPage = page;
 
	this._display();
}

Cette méthode prend en paramètre le numéro de la page vers laquelle il faut aller (n'oubliez pas que la numérotation commence à 0) ; elle vérifie que le paramètre est correct et affiche la page demandée.

Pour définir les 4 autres méthodes, il suffit d'appeler goToPage :

Navigation au travers des pages
previousPage: function() {
	this.goToPage(this.options.currentPage - 1);
},
 
nextPage: function() {
	this.goToPage(this.options.currentPage + 1);
},
 
firstPage: function() {
	this.goToPage(0);
},
 
lastPage: function() {
	this.goToPage(this.countPages - 1);
}

Utilisation de la classe

Nous avons terminé l'écriture de la classe Pagination. Maintenant, il suffit de créer un objet de type Pagination et d'appeler les différentes méthodes que nous avons écrites.

Un petit exemple valant mieux qu'un long discours, voici comment utiliser notre classe.

Création du tableau HTML

Pour pouvoir réaliser la pagination, nous devons d'abord créer notre table en utilisant la balise <tbody> :

Tableau
<table id="acteurs">
	<thead>
		<tr>
			<th>#</th>
			<th>Pr&eacute;nom</th>
			<th>Nom</th>
			<th>R&ocirc;le</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Kad</td>
			<td>Merad</td>
			<td>Philippe Abrams</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Dany</td>
			<td>Boon</td>
			<td>Antoine Bailleul</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Zo&eacute;</td>
			<td>F&eacute;lix</td>
			<td>Julie Abrams</td>
		</tr>
		<tr>
			<td>4</td>
			<td>Philippe</td>
			<td>Duquesne</td>
			<td>Fabrice Canoli</td>
		</tr>
		<tr>
			<td>5</td>
			<td>Line</td>
			<td>Renaud</td>
			<td>Madame Bailleul</td>
		</tr>
		<tr>
			<td>6</td>
			<td>Michel</td>
			<td>Galabru</td>
			<td>Le grand oncle de Julie</td>
		</tr>
		<tr>
			<td>7</td>
			<td>St&eacute;phane</td>
			<td>Freiss</td>
			<td>Jean</td>
		</tr>
		<tr>
			<td>8</td>
			<td>Guy</td>
			<td>Lecluyse</td>
			<td>Yann Vandernoout</td>
		</tr>
		<tr>
			<td>9</td>
			<td>Anne</td>
			<td>Marivin</td>
			<td>Annabelle Deconninck</td>
		</tr>
		<tr>
			<td>10</td>
			<td>Patrick</td>
			<td>Bosso</td>
			<td>Le gendarme</td>
		</tr>
		<tr>
			<td>11</td>
			<td>Zinedine</td>
			<td>Soualem</td>
			<td>Momo</td>
		</tr>
		<tr>
			<td>12</td>
			<td>J&eacute;r&ocirc;me</td>
			<td>Commandeur</td>
			<td>Inspecteur Lebic</td>
		</tr>
	</tbody>
</table>

Nous ne nous attarderons pas sur la syntaxe de la table.

Nous allons maintenant ajouter des liens permettant de naviguer :

Navigation
<div id="actions">
	<a href="#" id="premiere">Premi&eacute;re page</a>
	<a href="#" id="precedente">Page pr&eacute;c&eacute;dente</a>
	<a href="#" id="suivante">Page suivante</a>
	<a href="#" id="derniere">Derni&egrave;re page</a>
</div>

Utilisation de la classe Pagination

Maintenant, il faut importer les fichiers Javascript nécessaires. Pour cela, il suffit d'ajouter les lignes suivantes dans le head de votre page HTML :

Librairies
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/pagination.js"></script>

Enfin, nous allons instancier notre objet afin de pouvoir naviguer ; toujours dans le head de votre page, vous pouvez ajouter les lignes suivantes :

Mise en place
<script type="text/javascript">
	window.addEvent('domready', function() {
		var pagination = new Pagination('acteurs', {
			currentPage: 2,
			lines: 3
		});
 
		$('precedente').addEvent('click', function(event) {
			new Event(event).stop();
			pagination.previousPage();
		});
 
		$('suivante').addEvent('click', function(event) {
			new Event(event).stop();
			pagination.nextPage();
		});
 
		$('premiere').addEvent('click', function(event) {
			new Event(event).stop();
			pagination.firstPage();
		});
 
		$('derniere').addEvent('click', function(event) {
			new Event(event).stop();
			pagination.lastPage();
		});
	});
</script>

Voyons un peu ce que ce code fait :

Tout d'abord, il attend que le DOM soit prêt pour pouvoir créer notre objet : window.addEvent('domready', function() {...}). Pour plus de détails sur cette syntaxe, référez-vous à la page http://docs.mootools.net/Window/Window-DomReady.js#domready.

L'objet pagination est instancié et fait référence à la table acteurs ; de plus, il précise que la page par défaut est la 2 et qu'il faut afficher 3 lignes par page.

Ensuite, on ajoute les actions sur les liens pour naviguer.

Aucun commentaire
Les avatars utilisés proviennent du site Gravatar. Pour créer un compte, vous pouvez vous inscrire.
* Champs obligatoires