xlPaging.js
6.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
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) || 4,// 页面显示页码数量
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' style='color:#323232;cursor:pointer;width:1.2rem;place-content:center;font-weight:500;border:none;background:none;font-size: 0.2rem;letter-spacing: 0.01rem;position:relative;display:flex;place-items:center'><h5 style='border-radius:50%;width:0.5rem;height:0.5rem;background:#97dab6;position:absolute;left:-0.01rem;z-index:-1'></h5>上一页></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' style='color:#323232;cursor:pointer;width:1.2rem;place-content:center;font-weight:500;border:none;background:none;font-size: 0.2rem;color: #323232;letter-spacing: 0.01rem;position:relative;display:flex;place-items:center'><h5 style='border-radius:50%;width:0.5rem;height:0.5rem;background:#97dab6;position:absolute;left:-0.01rem;z-index:-1'></h5>下一页></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);