ul/ol列表分页

Posted 2021-02-25

Quick plugin to paginate a liste.

/*
 * 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);