diff --git a/README.md b/README.md index 0d6a2ac..58ed20c 100644 --- a/README.md +++ b/README.md @@ -15,10 +15,12 @@ More examples can be found on [project homepage](http://botmonster.com/jquery-bo ```javascript $('#pagination-here').bootpag({ - total: 7, // total pages + pageSize: 10, // items per page, default: 1 + total: 7, // total items page: 1, // default page maxVisible: 5, // visible pagination - leaps: true // next/prev leaps through maxVisible + leaps: true, // next/prev leaps through maxVisible + boundaryLeaps: true // whether disable next/prev button when page is in the first/last set of pages }).on("page", function(event, num){ $("#content").html("Page " + num); // or some ajax content loading... // ... after content load -> change total to 10 diff --git a/lib/jquery.bootpag.js b/lib/jquery.bootpag.js index d5d101f..d7b1550 100644 --- a/lib/jquery.bootpag.js +++ b/lib/jquery.bootpag.js @@ -10,110 +10,127 @@ * Project home: * http://botmonster.com/jquery-bootpag/ * - * Version: 1.0.7 + * Version: 1.0.8 * */ + (function($, window) { - $.fn.bootpag = function(options){ + $.fn.bootpag = function(options) { var $owner = this, settings = $.extend({ - total: 0, + pageSize: 1, //items per page + total: 0, // total items page: 1, maxVisible: null, leaps: true, + boundaryLeaps: true, //whether disable next/prev button when page is in the first/last set of pages href: 'javascript:void(0);', hrefVariable: '{{number}}', next: '»', prev: '«', - firstLastUse: false, + firstLastUse: false, first: '', last: '', + infoUse: true, // total info + infoPosition: 'right', // 'left', 'right',works only when infoUse is true + info: '共{{total}}条/{{totalPage}}页', wrapClass: 'pagination', activeClass: 'active', disabledClass: 'disabled', nextClass: 'next', prevClass: 'prev', - lastClass: 'last', - firstClass: 'first' + lastClass: 'last', + firstClass: 'first', + infoClass: 'info' }, $owner.data('settings') || {}, options || {}); - if(settings.total <= 0) - return this; + if (!settings.total || settings.total < 0) { + settings.total = 0; + } - if(!$.isNumeric(settings.maxVisible) && !settings.maxVisible){ + if(!$.isNumeric(settings.maxVisible) && !settings.maxVisible){ settings.maxVisible = parseInt(settings.total, 10); } + if (!settings.pageSize || settings.pageSize < 1) { + settings.pageSize = 1; + } + $owner.data('settings', settings); function renderPage($bootpag, page){ - page = parseInt(page, 10); var lp, - maxV = settings.maxVisible == 0 ? 1 : settings.maxVisible, - step = settings.maxVisible == 1 ? 0 : 1, - vis = Math.floor((page - 1) / maxV) * maxV, - $page = $bootpag.find('li'); - settings.page = page = page < 0 ? 0 : page > settings.total ? settings.total : page; + vis, + totalPage, + info, + maxV = settings.maxVisible || 1, + $page = $bootpag.find('li'), + lfirst = $page.first(), + llast = $page.last(); + + totalPage = Math.ceil(settings.total/settings.pageSize) || 1; + settings.page = page = page < 1 ? 1 : page > totalPage ? totalPage : page; + vis = Math.floor((page - 1) / maxV) * maxV; + info = settings.info.replace('{{total}}', settings.total).replace('{{totalPage}}', totalPage); + $page.removeClass(settings.activeClass); + + if (settings.infoUse && settings.infoPosition === 'left') { + lfirst.addClass(settings.disabledClass).find('a').html(info); + lfirst = lfirst.next(); + } + + if(settings.firstLastUse) { + lfirst.toggleClass(settings.disabledClass, page === 1); + lfirst = lfirst.next(); + } + lp = page - 1 < 1 ? 1 : - settings.leaps && page - 1 >= settings.maxVisible ? - Math.floor((page - 1) / maxV) * maxV : page - 1; - - if(settings.firstLastUse) { - $page - .first() - .toggleClass(settings.disabledClass, page === 1); - } - - var lfirst = $page.first(); - if(settings.firstLastUse) { - lfirst = lfirst.next(); - } - - lfirst - .toggleClass(settings.disabledClass, page === 1) + settings.leaps && page - 1 >= maxV ? + vis : page - 1; + + lfirst + .toggleClass(settings.disabledClass, page === 1 || (settings.leaps && !settings.boundaryLeaps && vis == 0)) .attr('data-lp', lp) .find('a').attr('href', href(lp)); - var step = settings.maxVisible == 1 ? 0 : 1; + if (settings.infoUse && settings.infoPosition === 'right') { + llast.addClass(settings.disabledClass).find('a').html(info); + llast = llast.prev(); + } - lp = page + 1 > settings.total ? settings.total : - settings.leaps && page + 1 < settings.total - settings.maxVisible ? - vis + settings.maxVisible + step: page + 1; + if(settings.firstLastUse) { + llast.toggleClass(settings.disabledClass, page === totalPage); + llast = llast.prev(); + } - var llast = $page.last(); - if(settings.firstLastUse) { - llast = llast.prev(); - } + lp = page + 1 > totalPage ? totalPage : + settings.leaps && vis < totalPage - maxV ? + vis + maxV + 1: page + 1; - llast - .toggleClass(settings.disabledClass, page === settings.total) + llast + .toggleClass(settings.disabledClass, page === totalPage || (settings.leaps && !settings.boundaryLeaps && vis + maxV >= totalPage)) .attr('data-lp', lp) .find('a').attr('href', href(lp)); - $page - .last() - .toggleClass(settings.disabledClass, page === settings.total); - - var $currPage = $page.filter('[data-lp='+page+']'); - var clist = "." + [settings.nextClass, - settings.prevClass, + var clist = "." + [settings.nextClass, + settings.prevClass, settings.firstClass, - settings.lastClass].join(",."); + settings.lastClass, + settings.infoClass].join(",."); if(!$currPage.not(clist).length){ - var d = page <= vis ? -settings.maxVisible : 0; $page.not(clist).each(function(index){ - lp = index + 1 + vis + d; + lp = index + 1 + vis; $(this) .attr('data-lp', lp) - .toggle(lp <= settings.total) + .toggle(lp <= totalPage) .find('a').html(lp).attr('href', href(lp)); }); $currPage = $page.filter('[data-lp='+page+']'); @@ -122,7 +139,7 @@ $owner.data('settings', settings); } - function href(c){ + function href(c){ return settings.href.replace(settings.hrefVariable, c); } @@ -130,8 +147,16 @@ return this.each(function(){ var $bootpag, lp, me = $(this), + maxV = settings.maxVisible || 1, + totalPage = Math.ceil(settings.total/settings.pageSize), + info = settings.info.replace('{{total}}', settings.total).replace('{{totalPage}}', totalPage), p = ['