1. 首页
  2. 文章中心
  3. JavaScript

JQuery的Pager分页器实现代码

2319 阅读 1 评论
我是靠谱客的博主 甜蜜机器猫，这篇文章主要介绍JQuery的Pager分页器实现代码，现在分享给大家，希望可以做个参考。

本文实例为大家分享了JQuery的Pager分页器的具体实现代码，供大家参考，具体内容如下

效果图：

代码：

html代码：

复制代码
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
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>分页器</title>
 <link href="pager.css" rel="stylesheet"/>
</head>
<body>
 <div id="pager"></div>
 <script src="pager.js"></script>
 <script>
 function doChangePage(obj){
  //TO DO
 }

 var pagerBox = document.getElementById('pager');

 var pager = new Pager({
  index: 1,
  total: 15,
  parent: pagerBox,
  onchange: doChangePage
 });
 </script>
</body>
</html>

css代码：

复制代码
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
.pager-box:after{
 display:block;
 height:0;
 visibility:hidden;
 clear:both;
 content:'';
}
.pager{
 float:left;
 position:relative;
 left:50%;
 font-family:微软雅黑;
}
.pager a,.pager span{
 position:relative;
 left:-50%;
 display:block;
 float:left;
 margin-left:5px;
 border:1px solid #b6bcc1;
 padding: 5px 10px;
 text-decoration:none;
 color:#b6bcc1;
 border-radius:3px;
}
.pager span{
 border:0;
}
.pager a.js-selected{
 background:#b6bcc1;
 color:#fff;
 cursor:default;
}
.pager a.js-disabled{
 background:#f1f1f1;
 border-color:#f1f1f1;
 cursor:default;
 color:#fff;
}

pager.js代码

复制代码
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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
(function(window, undefined){

 /**
 * 创建元素节点并返回
 */
 function create(tagName, className, parent){
 var element = document.createElement(tagName);
 element.className = className;
 parent.appendChild(element);
 return element;
 }

 /**
 * 数组消除重复
 */
 function clearRepeat(arr){
 var obj = {},
  result = [];
 for(var i = 0, len = arr.length; i < len; i++){
  obj[arr[i]] = 1;
 }
 for(var i in obj){
  result.push(i);
 }
 return result;
 }

 /**
 * 添加类名
 */
 function addClassName(element, className){
 var aClass = element.className.split(' ');
 aClass.push(className);
 aClass = clearRepeat(aClass);
 element.className = aClass.join(' ');
 }
 /**
 * 删除类名
 */
 function delClassName(element, className){
 var aClass = element.className.split(' '),
  index = aClass.indexOf(className);
 if(index > 0) aClass.splice(index, 1);
 element.className = aClass.join(' ');
 }

 /**
 * 检查是否含有类名
 * @param element
 * @param className
 * @returns {boolean}
 */
 function hasClassName(element, className){
 var aClass = element.className.split(' '),
  index = aClass.indexOf(className);
 if(index > 0) return true;
 return false;
 }

 var Pager = function(obj){

 this.__total = obj.total || 1;
 this.__index = obj.index || 1;
 this.__parent = obj.parent;
 this.__onchange = obj.onchange;
 //初始化分页器
 this.__init(obj);

 };

 var pro = Pager.prototype;
 /**
 * 初始化分页器
 */
 pro.__init = function(obj){
 if(this.__total < this.__index) return;
 //存储数字
 this.__numbers = [];
 //储存省略号
 this.__dots = [];
 this.__wrapper = create('div', 'pager-box', this.__parent);
 this.__body = create('div', 'pager', this.__wrapper);
 //存储上一页
 this.__preBtn = create('a', 'prev', this.__body);
 this.__preBtn.href = 'javascript：void(0);';
 this.__preBtn.innerText = (obj.label && obj.label.prev) || '上一页';
 //存储数字
 if(this.__total < 8){
  for(var i = 0; i < this.__total; i++){
  var t = create('a', 'number', this.__body);
  t.href = 'javascript：void(0);';
  t.innerText = i + 1;
  this.__numbers.push(t);
  }
 }else{
  for(var i = 0; i < 2; i++){
  var t = create('span', 'dots', this.__body);
  t.innerText = '...';
  this.__dots.push(t);
  };
  for(var i = 0; i < 7; i++){
  var t = create('a', 'number', this.__body);
  t.href = 'javascript：void(0);';
  this.__numbers.push(t);
  }

 }
 //存储下一页
 this.__nextBtn = create('a', 'next', this.__body);
 this.__nextBtn.href = 'javascript：void(0);';
 this.__nextBtn.innerText = (obj.label && obj.label.next) || '下一页';
 //
 this._$setIndex(this.__index);
 //
 this.__body.onclick = this.__doClick.bind(this);
 };

 pro.__doClick = function(e){
 var e = e || window.event,
  target = e.target || e.srcElement;
 //点击省略号
 if(target.tagName.toLowerCase() == 'span') return;
 //点击了不能点击的上一页或者下一页
 if(hasClassName(target, 'js-disabled')) return;
 //点击了当前页
 if(hasClassName(target, 'js-selected')) return;

 if(target == this.__preBtn){
  //点击了上一页
  this._$setIndex(this.__index - 1);
 }else if(target == this.__nextBtn){
  //点击了下一页
  this._$setIndex(this.__index + 1);
 }else{
  //点击了数字
  var index = target.innerText;
  this._$setIndex(index);
 }

 };

 /**
 * 跳转页数
 */
 pro._$setIndex = function(index){

 index = parseInt(index);
 //更新信息
 if(index != this.__index){
  this.__last = this.__index;
  this.__index = index;
 }
 //处理
 delClassName(this.__preBtn, 'js-disabled');
 delClassName(this.__nextBtn, 'js-disabled');
 if(this.__total < 8){
  //总页数小于8的情况
  if(this.__last) delClassName(this.__numbers[this.__last - 1], 'js-selected');
  addClassName(this.__numbers[this.__index - 1], 'js-selected');
  if(this.__index == 1) addClassName(this.__preBtn, 'js-disabled');
  if(this.__index == this.__total) addClassName(this.__nextBtn, 'js-disabled');

 }else{
  this.__dots[0].style.display = 'none';
  this.__dots[1].style.display = 'none';
  for(var i = 0; i < 7; i++){
  delClassName(this.__numbers[i], 'js-selected');
  };
  if(this.__index < 5){
  for(var i = 0; i < 6; i++){
   this.__numbers[i].innerText = i + 1;
  }
  this.__numbers[6].innerText = this.__total;
  this.__dots[1].style.display = 'block';
  this.__body.insertBefore(this.__dots[1], this.__numbers[6]);
  addClassName(this.__numbers[this.__index - 1], 'js-selected');
  if(this.__index == 1) addClassName(this.__preBtn, 'js-disabled');
  }else if(this.__index > this.__total - 4){
  for(var i = 1; i < 7; i++){
   this.__numbers[i].innerText = this.__total + i -6;
  }
  this.__numbers[0].innerText = '1';
  this.__dots[0].style.display = 'block';
  this.__body.insertBefore(this.__dots[0], this.__numbers[1]);
  addClassName(this.__numbers[this.__index + 6 - this.__total], 'js-selected');
  if(this.__index == this.__total) addClassName(this.__nextBtn, 'js-disabled');
  }else{
  this.__numbers[0].innerText = '1';
  for(var i = 1; i < 6; i++){
   this.__numbers[i].innerText = this.__index - 3 + i;
   if(i == 3) addClassName(this.__numbers[i], 'js-selected');
  }
  this.__numbers[6].innerText = this.__total;
  this.__dots[0].style.display = 'block';
  this.__body.insertBefore(this.__dots[0], this.__numbers[1]);
  this.__dots[1].style.display = 'block';
  this.__body.insertBefore(this.__dots[1], this.__numbers[6]);
  }

 }
 if(typeof this.__onchange == 'function'){
  this.__onchange({
  index: this.__index,
  last: this.__last,
  total: this.__total
  })
 }

 };
 /**
 * 得到总页数
 */
 pro._$getIndex = function(){
 return this.__index;
 };
 /**
 * 得到上一个页数
 */
 pro._$getLast = function(){
 return this.__last;
 };
 //变成全局
 window.Pager = Pager;

})(window);

主要思路：

分页器共分为以下4种情况：

情况1，当total < 8 时，所有的页码全部显示。

情况2，当total >= 8 且 index < 5时，显示1-6和最后一页。

情况3，当total >= 8 且 index > total - 4时，显示1和最后6项。

情况4，当total >= 8 且 5 <= index <= total - 4时，显示1和最后一页，和中间5项。

Pager类实例化时传入一个设置对象：

复制代码
1
2
3
4
5
6
{
 parent: element, //给分页器设置父节点
 index: index, //设置当前页
 total: total, //设置总页数
 onchange: function(){} //页数变化回调函数
}

当我们实例化Pager时，执行Pager函数体内的语句，首先赋值，然后就执行初始化函数：

复制代码
1
2
3
4
5
6
7
8
9
var Pager = function(obj){
 //赋值
 this.__total = obj.total || 1;
 this.__index = obj.index || 1;
 this.__parent = obj.parent;
 this.__onchange = obj.onchange;
 //初始化分页器
 this.__init(obj);
};

初始化函数this.__init结构：

复制代码
1
2
3
4
5
6
7
8
Pager.prototype.__init = function(obj){

 (根据上面分析的情况进行处理)
 ...
 this._$setIndex(this.__index); //跳转到初始页
 //绑定分页器点击函数
 this.__body.onclick = this.__doClick.bind(this);
};

初始化完成，点击后就会做出相应的判断，并使用this._$setIndex(index)进行跳转。

更多关于分页教程的文章，请查看以下专题：

javascript分页功能操作
jquery分页功能操作
php分页功能操作
ASP.NET分页功能操作

下载：paper

以上就是本文的全部内容，希望对大家的学习有所帮助。

最后

以上就是甜蜜机器猫最近收集整理的关于JQuery的Pager分页器实现代码的全部内容，更多相关JQuery内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(1531)

相关文章

Win10升级宝典：免费升级Win10的诸多问题
Win10升级宝典：免费升级Win10的诸多问题
ubuntu 14.10系统怎么设置静态ip？
ubuntu 14.10系统怎么设置静态ip？
Photoshop调出秋季阳光色外景人物图片
Photoshop调出秋季阳光色外景人物图片
linux命令每天必学(15)之tail 命令
linux命令每天必学(15)之tail 命令
JQuery的Pager分页器实现代码
JQuery的Pager分页器实现代码
HTC Re如影相机怎么关闭广角镜？
HTC Re如影相机怎么关闭广角镜？
HP各种打印机恢复出厂设置的方法
HP各种打印机恢复出厂设置的方法
Vue官网todoMVC示例代码
Vue官网todoMVC示例代码

评论列表共有 1 条评论

开朗过客 发表于：2021-12-29 20:57:00 回复TA

怎么用法

立即
投稿
返回
顶部