init
This commit is contained in:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,145 @@
|
||||
;(function ($, window, document, undefined) {
|
||||
'use strict';
|
||||
function Paging(element, options) {
|
||||
this.element = element;
|
||||
this.options = {
|
||||
nowPage: options.nowPage || 1, // 当前页码
|
||||
pageNum: options.pageNum, // 总页码
|
||||
buttonNum: (options.buttonNum>=5?options.buttonNum:5) || 7,// 页面显示页码数量
|
||||
callback: options.callback // 回调函数
|
||||
};
|
||||
this.init();
|
||||
}
|
||||
Paging.prototype = {
|
||||
constructor : Paging,
|
||||
init : function() {
|
||||
this.createHtml();
|
||||
this.bindClickEvent();
|
||||
this.disabled();
|
||||
},
|
||||
createHtml : function(){
|
||||
var me = this;
|
||||
var nowPage = this.options.nowPage;
|
||||
var pageNum = this.options.pageNum;
|
||||
var buttonNum = this.options.buttonNum;
|
||||
var content = [];
|
||||
content.push("<ul>");
|
||||
content.push("<li class='xl-prevPage'>上一页</li>");
|
||||
//页面总数小于等于当前要展示页数总数,展示所有页面
|
||||
if(pageNum <= buttonNum){
|
||||
for(var i=1; i<=pageNum; i++){
|
||||
if (nowPage !== i) {
|
||||
content.push("<li>"+i+"</li>");
|
||||
} else {
|
||||
content.push("<li class='xl-active'>"+i+"</li>");
|
||||
}
|
||||
}
|
||||
}else if(nowPage <= Math.floor(buttonNum / 2)){
|
||||
//当前页面小于等于展示页数总数的一半(向下取整),从1开始
|
||||
for(var i=1;i<= buttonNum-2;i++){
|
||||
if (nowPage !== i) {
|
||||
content.push("<li>"+i+"</li>");
|
||||
} else {
|
||||
content.push("<li class='xl-active'>"+i+"</li>");
|
||||
}
|
||||
}
|
||||
content.push("<li class='xl-disabled'>...</li>");
|
||||
content.push("<li>" + pageNum + "</li>");
|
||||
}else if(pageNum - nowPage <= Math.floor(buttonNum / 2)){
|
||||
//当前页面大于展示页数总数的一半(向下取整)
|
||||
content.push("<li>"+1+"</li>");
|
||||
content.push("<li class='xl-disabled'>...</li>");
|
||||
for(var i=pageNum-buttonNum+3; i<=pageNum; i++){
|
||||
if (nowPage !== i) {
|
||||
content.push("<li>"+i+"</li>");
|
||||
} else {
|
||||
content.push("<li class='xl-active'>"+i+"</li>");
|
||||
}
|
||||
}
|
||||
}else{
|
||||
//前半部分页码
|
||||
if(nowPage - Math.floor(buttonNum / 2) <= 0){
|
||||
for(var i=1;i<= Math.floor(buttonNum / 2);i++){
|
||||
if (nowPage !== i) {
|
||||
content.push("<li>"+i+"</li>");
|
||||
} else {
|
||||
content.push("<li class='xl-active'>"+i+"</li>");
|
||||
}
|
||||
}
|
||||
}else{
|
||||
content.push("<li>"+1+"</li>");
|
||||
content.push("<li class='xl-disabled'>...</li>");
|
||||
for(var i=nowPage-Math.floor(buttonNum / 2)+(buttonNum % 2 == 0 ? 3: 2); i<=nowPage; i++){
|
||||
if (nowPage !== i) {
|
||||
content.push("<li>"+i+"</li>");
|
||||
} else {
|
||||
content.push("<li class='xl-active'>"+i+"</li>");
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
//后半部分页码
|
||||
if(pageNum - nowPage <= 0){
|
||||
for(var i=nowPage+1;i<=pageNum;i++){
|
||||
content.push("<li>" + i + "</li>");
|
||||
}
|
||||
}else{
|
||||
for(var i=nowPage+1; i<=nowPage+Math.floor(buttonNum / 2)-2; i++){
|
||||
content.push("<li>"+i+"</li>");
|
||||
}
|
||||
content.push("<li class='xl-disabled'>...</li>");
|
||||
content.push("<li>" + pageNum + "</li>");
|
||||
}
|
||||
}
|
||||
content.push("<li class='xl-nextPage'>下一页</li>");
|
||||
content.push("</ul>");
|
||||
me.element.html(content.join(''));
|
||||
// DOM重新生成后每次调用是否禁用button
|
||||
setTimeout(function () {
|
||||
me.disabled();
|
||||
}, 20);
|
||||
|
||||
},
|
||||
bindClickEvent: function(){
|
||||
var me = this;
|
||||
me.element.off('click', 'li');
|
||||
me.element.on('click', 'li', function () {
|
||||
var cla = $(this).attr('class');
|
||||
var num = parseInt($(this).html());
|
||||
var nowPage = me.options.nowPage;
|
||||
if( $(this).hasClass('xl-disabled')){
|
||||
return ;
|
||||
}
|
||||
if (cla === 'xl-prevPage') {
|
||||
if (nowPage !== 1) {
|
||||
me.options.nowPage -= 1;
|
||||
}
|
||||
} else if (cla === 'xl-nextPage') {
|
||||
if (nowPage !== me.options.pageNum) {
|
||||
me.options.nowPage += 1;
|
||||
}
|
||||
}else {
|
||||
me.options.nowPage = num;
|
||||
}
|
||||
me.createHtml();
|
||||
if (me.options.callback) {
|
||||
me.options.callback(me.options.nowPage);
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
disabled: function () {
|
||||
var me = this;
|
||||
var nowPage = me.options.nowPage;
|
||||
var pageNum = me.options.pageNum;
|
||||
if (nowPage === 1) {
|
||||
me.element.children().children('.xl-prevPage').addClass('xl-disabled');
|
||||
} else if (nowPage === pageNum) {
|
||||
me.element.children().children('.xl-nextPage').addClass('xl-disabled');
|
||||
}
|
||||
}
|
||||
}
|
||||
$.fn.paging = function (options) {
|
||||
return new Paging($(this), options);
|
||||
}
|
||||
})(jQuery, window, document);
|
||||
Reference in New Issue
Block a user