/ Published in: jQuery
Quick plugin to paginate a liste.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/* * Use: * <script src="lib/jquery.pagination.js"></script> * $('#mylist').pagination(); */ (function($) { $.fn.pagination = function(options) { var defaults = { nbParPage: 5, pageAffichee: 1, positionNav: "top" /* top, bottom, or both */ }; var options = $.extend(defaults, options); return this.each(function() { var selecteur = $(this); function afficherElements (numPremier, nbParPage, nbElements) { selecteur.children('li').hide(); var no = numPremier; while ( no < (numPremier + nbParPage) && no <= (nbElements-1) ) { selecteur.children('li:nth-child(' + (no+1) + ')').fadeIn(250); no += 1; } } var nbElements = selecteur.children('li').length; var nbPages = Math.floor(nbElements / options.nbParPage); if (nbElements % options.nbParPage > 0) nbPages += 1; var pageAffichee = 1; if ( nbPages > 1 ) { // Ecriture de la pagination var pageNav = '<div class="nav"><ul>'; var i; for ( i = 1; i <= nbPages; i++) { if (i == options.pageAffichee) pageNav += '<li class="pageEnCours"><a id="navpage' + i + '" href="#">' + i + '</a></li>'; else pageNav += '<li><a id="navpage' + i + '" href="#">' + i + '</a></li>'; } pageNav += '</ul></div>'; switch ( options.positionNav ) { case "bottom": selecteur.after( pageNav ); break; case "both": selecteur.before( pageNav ); selecteur.after( pageNav ); break; default: selecteur.before( pageNav ); } // Affichage de la premiere page au chargement var numPremierElement = ( options.nbParPage * options.pageAffichee ) - options.nbParPage; afficherElements(numPremierElement, options.nbParPage, nbElements); // Gestion du clic sur un numero de page $('.nav ul li a').click(function() { var pageAffichee = parseInt($(this).attr("id").substring(12)); $(this).parent('li').siblings('.pageEnCours').removeClass('pageEnCours'); //selecteur.find('li.pageEnCours').removeClass('pageEnCours'); $(this).parent('li').addClass('pageEnCours'); var numPremierElement = ( options.nbParPage * pageAffichee ) - options.nbParPage; afficherElements(numPremierElement, options.nbParPage, nbElements); return false; }); } }); } })(jQuery);