jQuery - easyPaginate

Généralités

Overview

jQuery easyPaginate est un plugin pour jQuery permettant de créer une pagination à partir de n'importe quelle liste d'éléments.
Le plugin supporte une dizaine d'options telles que les animations de transition de page, les labels...

jQuery easyPaginate is a plugin for jQuery to paginate anything.
This plugin have some options like the animated transition type, labels...

Installation

S'assurer d'avoir jQuery sur la page
Récupérer le plugin jquery.easyPaginate ici (compressé) ou ici (source) et le placer en entête de page.
Ce qui donne :

Make sure you have jQuery in your page
Get the plugin jquery.easyPaginate here (minified) or here (source) and call it in the header.
So you have :

					<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
					<script type="text/javascript" src="jquery.easyPaginate.js"></script>

Le javascript et un peu de CSS

The javascript and some CSS

					.easyPaginateNav {clear:both;margin:10px 0}
                    .easyPaginateNav a {padding:2px 5px;margin:0 2px;color:#006699;background:#fff;border:1px solid #277bcb;text-decoration:none}
                    .easyPaginateNav a:hover, .easyPaginateNav a.current {background:#277BCB;color:#fff}
                    .easyPaginateNav a.disabled, .easyPaginateNav a.disabled:hover {border:1px solid #ccc;color:#ccc;background:#fff}}

					$(document).ready(function() {
						$('.easyPaginate').easyPaginate({							
							elementsPerPage: '5',
							effect: 'climb'
						});
					});

Le code HTML

HTML code

Résultat / Démos

Result / Demos

Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7
Box 8
Box 9
Box 10
Box 11
Box 12
Box 13
Box 14
Box 15

Compatibilité

Support

Firefox 2.0+
Safari
Opéra 9+
Chrome
IE 6+

Options

paginateElement: 'li' // élément de pagination
hashPage: 'page', // hashtag pour la pagination automatique au chargement
elementsPerPage: 10// Nombre d'éléments par page
effect: 'default' // Type de transition : climb, fade, slide
slideOffset: 200 // décalage en pixels de l'animation
firstButton: true // false pour désactiver
firstButtonText: '<<' // texte à afficher
lastButton: true // false pour désactiver
lastButtonText: '>>' // texte à afficher
prevButton: true // false pour désactiver
prevButtonText: '<' // texte à afficher
nextButton: true // false pour désactiver
nextButtonText: '>' // texte à afficher

paginateElement: 'li' // element to paginate
hashPage: 'page', // hashtag to auto paginate when loading
elementsPerPage: 10// Elements to display per page
effect: 'default' // Transition type : climb, fade, slide
slideOffset: 200 // offset in pixels for the animation
firstButton: true // false to disable
firstButtonText: '<<' // text to display
lastButton: true // false to disable
lastButtonText: '>>' // text to display
prevButton: true // false to disable
prevButtonText: '<' // text to display
nextButton: true // false to disable
nextButtonText: '>' // text to display