ul/ol list paging - jQuery Snipplr Social Repository

Revision: 35323

at January 29, 2011 00:24 by Moonsheeld

Updated Code

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

Revision: 35322

at November 7, 2010 21:16 by Moonsheeld

Updated Code

/*
 * Plugin jQuery pagination
 * CrÃƒï¿½Ã‚Â©Ãƒï¿½Ã‚Â© par AurÃƒï¿½Ã‚Â©lie Lucet [email protected]
 * www.aurelielucet.com
 *
 * CrÃƒï¿½Ã‚Â©e une pagination sur une liste ol/ul.
 *
 * v1.0 17/09/2010
 *
 * Utilisation:
 * <script src="lib/jquery.pagination.js"></script>
 * $('#maliste').pagination();
 */

(function($) {	    
	$.fn.pagination = function(options) {

		var defaults = {
			nbParPage: 5,
			pageAffichee: 1,
			positionNav: "top" /* top, bottom, 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="booksnav"><ul>';
                var i;
                for ( i = 1; i <= nbPages; i++) {
                    if (i == options.pageAffichee)
                        pageNav += '<li class="pageEnCours"><a id="booksnavpage' + i + '" href="#">' + i + '</a></li>';
                    else
                        pageNav += '<li><a id="booksnavpage' + 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 premiÃƒï¿½Ã‚Â¨re page au chargement
                var numPremierElement = ( options.nbParPage * options.pageAffichee ) - options.nbParPage;
                afficherElements(numPremierElement, options.nbParPage, nbElements);

                // Gestion du clic sur un numÃƒï¿½Ã‚Â©ro de page
                $('.booksnav 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);

Revision: 35321

at November 7, 2010 08:59 by Moonsheeld

Updated Code

/*
 * Plugin jQuery pagination
 * CrÃƒÂ©ÃƒÂ© par AurÃƒÂ©lie Lucet [email protected]
 * www.aurelielucet.com
 *
 * CrÃƒÂ©e une pagination sur une liste ol/ul.
 *
 * v1.0 17/09/2010
 *
 * Utilisation:
 * <script src="lib/jquery.pagination.js"></script>
 * $('#maliste').pagination();
 */

(function($) {	    
	$.fn.pagination = function(options) {

		var defaults = {
			nbParPage: 5,
			pageAffichee: 1,
			positionNav: "top" /* top, bottom, 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="booksnav"><ul>';
                var i;
                for ( i = 1; i <= nbPages; i++) {
                    if (i == options.pageAffichee)
                        pageNav += '<li class="pageEnCours"><a id="booksnavpage' + i + '" href="#">' + i + '</a></li>';
                    else
                        pageNav += '<li><a id="booksnavpage' + 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 premiÃƒÂ¨re page au chargement
                var numPremierElement = ( options.nbParPage * options.pageAffichee ) - options.nbParPage;
                afficherElements(numPremierElement, options.nbParPage, nbElements);

                // Gestion du clic sur un numÃƒÂ©ro de page
                $('.booksnav 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);

Revision: 35320

at November 5, 2010 08:56 by Moonsheeld

Initial Code

/*

 * Plugin jQuery pagination

 * CrÃ©Ã© par AurÃ©lie Lucet [email protected]

 * www.aurelielucet.com

 *

 * CrÃ©e une pagination sur une liste ol/ul.

 *

 * v1.0 17/09/2010

 *

 * Utilisation:

 * <script src="lib/jquery.pagination.js"></script>

 * $('#maliste').pagination();

 */



(function($) {	    

	$.fn.pagination = function(options) {

	

		var defaults = {

			nbParPage: 5,

			pageAffichee: 1,

			positionNav: "top" /* top, bottom, 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="booksnav"><ul>';

                var i;

                for ( i = 1; i <= nbPages; i++) {

                    if (i == options.pageAffichee)

                        pageNav += '<li class="pageEnCours"><a id="booksnavpage' + i + '" href="#">' + i + '</a></li>';

                    else

                        pageNav += '<li><a id="booksnavpage' + 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 premiÃ¨re page au chargement

                var numPremierElement = ( options.nbParPage * options.pageAffichee ) - options.nbParPage;

                afficherElements(numPremierElement, options.nbParPage, nbElements);



                // Gestion du clic sur un numÃ©ro de page

                $('.booksnav 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);

Initial URL

Initial Description

Quick plugin to paginate a liste.

Initial Title

ul/ol list paging

Initial Tags

plugin, page

Initial Language

jQuery

Choose a language for easy browsing: