本文实例为大家分享了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
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> </style></head><body> <div id="page-nation"></div> <script src="./page.js"></script> <script> //分页调用方法 const Api=new pageNation({ el:"#page-nation",//分页器位置 page:1,//当前页 size:5,//默认5,10,15,20 total:100,//数据总条数 styUrl: './page.css',//样式地址（可修改） IsShowBtn: {//设置需要显示的按钮 choosePageSize: true,//是否显示下拉选项 IsShowPrevOrNextBtn: true,//是否显示上一页下一页按钮 IsShowEnterBtn: true,//是否显示跳转输入 IsShowTotalPage:true,//是否显示总页数 }, callback:function(page,size,total){ console.log(page,size,total); //此处为ajax请求 } }); </script> </body></html> |
page.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
|
var pageNation;pageNation = (function () { function extend(target, source) { for (var obj in source) { target[obj] = source[obj]; } return target; } function pageNation(options) { var defaultOptions = { el: "body",//分页父容器 page: 1, size: 10, total: 0, styUrl: 'style.css', callback: null, IsShowBtn: {//设置需要显示的按钮 choosePageSize: true,//是否显示下拉选项 IsShowPrevOrNextBtn: true,//否显示上一页下一页按钮 IsShowEnterBtn: true,//是否显示跳转输入 IsShowTotalPage:true,//是否显示总页数 } }; this.options = extend(defaultOptions, options) || {}; this.options.el = document.querySelectorAll(this.options.el)[0]; this.pageT = Math.ceil(this.options.total / this.options.size); this.init(); if (!document.querySelector("#dynamic-style")) { this.pageStyle(); } //this.options.callback(1,self.options.size,self.options.total); } var proto = pageNation.prototype || {}; proto.rander = function (page, size, total) { this.options.page = !!page ? page : 1; this.options.size = !!size ? size : 10; this.options.total = !!total ? total : 0;// this.pageT = Math.ceil(this.options.total / this.options.size); this.init(); this.page_nation = null; }; proto.init = function () { var self = this; var pageNum = function (page) {//创建分页器 return (function () { let ol = document.createElement("ol"); ol.classList.add("page-ol"); let p = !!page ? page : 1; let tPage = Math.ceil(self.options.total / self.options.size); let s = p <= 3 ? 1 : p > (tPage - 3) ? tPage - 4 : p - 2; s=s==0?1:s; for (let i = s; i < (s + 5); i++) { if (i > tPage) { break; } let li = document.createElement("li"); li.innerText = i; if (i == p) { li.classList.add("hover"); } ol.appendChild(li); } return ol; })(page); }; var sizeNum = function (size) {//重置size return (function () { let select = document.createElement("select"); select.setAttribute("class", "page-Select"); let s = !!size ? size : 10; //let tPage=Math.ceil(self.options.total/self.options.size); for (let i = 5; i <= (5 * 4); i += 5) { let option = document.createElement("option"); option.value = i; option.innerText = i; if (i === self.options.size) { option.setAttribute("selected", "selected"); } select.appendChild(option); } return select; })(size); }; var prevBtn = function () {//上一页按钮 return (function () { let button = document.createElement("span"); button.setAttribute("class", "prev-btn"); button.innerText = "上一页"; if (self.options.page == 1) { button.classList.add("disabled") }; return button; })(); }; var nextBtn = function () {//下一页按钮 return (function () { let button = document.createElement("span"); button.setAttribute("class", "next-btn"); button.innerText = "下一页"; if (self.options.page == self.pageT) { button.classList.add("disabled") } ; return button; })(); }; var pageMark = function () {//页码标识 return (function () { let span = document.createElement("span"); span.setAttribute("class", "pageMark"); span.innerHTML = "<strong>" + self.options.page + "</strong> / <strong>" + Math.ceil(self.options.total / self.options.size) + "</strong>"; return span; })(); }; var enterBtn = function () {//跳转按钮 return (function () { let button = document.createElement("span"); button.setAttribute("class", "enter-btn"); let ipt = document.createElement("input"); ipt.value = self.options.page; ipt.setAttribute("type", "text"); let b = document.createElement("span"); b.setAttribute("class", "enterBtn"); b.innerText = "跳转"; button.appendChild(ipt); button.appendChild(b); return button; })(); }; let page_nation = self.options.el.querySelector(".page-nation"); if (page_nation != null && page_nation != "undefind") { page_nation.innerHTML = ""; } else { page_nation = document.createElement("div"); page_nation.classList.add("page-nation"); self.options.el.appendChild(page_nation); } page_nation.appendChild(new pageNum(self.options.page)); self.options.IsShowBtn.choosePageSize&&page_nation.appendChild(new sizeNum(self.options.size)); self.options.IsShowBtn.IsShowPrevOrNextBtn&&page_nation.appendChild(new prevBtn()); self.options.IsShowBtn.IsShowPrevOrNextBtn&&page_nation.appendChild(new nextBtn()); page_nation.appendChild(new pageMark()); self.options.IsShowBtn.IsShowEnterBtn&&page_nation.appendChild(new enterBtn()); self.page_nation = document.querySelector(".page-nation"); this.switchPage(self.options.callback); this.switchSize(self.options.callback); return self; }; proto.pageStyle = function () { let headDoc = document.querySelector("head"); var linkTag = document.createElement("link"); var cssURL = this.options.styUrl; linkTag.id = 'dynamic-style'; linkTag.href = cssURL; linkTag.setAttribute('rel', 'stylesheet'); linkTag.setAttribute('media', 'all'); linkTag.setAttribute('type', 'text/css'); headDoc.appendChild(linkTag); }; proto.switchPage = function (fun) { let self = this; let lis = this.page_nation.children[0].children; for (let i = 0, len = lis.length; i < len; i++) { lis[i].onclick = function () { self.options.page = this.innerText; self.rander(self.options.page, self.options.size, self.options.total); }; } this.options.el.querySelectorAll(".prev-btn")[0].onclick = function (e) { //console.time("rr"); self.options.page = --self.options.page; self.rander(self.options.page, self.options.size, self.options.total); //console.timeEnd("rr"); }; this.options.el.querySelectorAll(".next-btn")[0].onclick = function (e) { self.options.page = ++self.options.page; self.rander(self.options.page, self.options.size, self.options.total); }; this.options.el.querySelectorAll(".enterBtn")[0].onclick = function (e) { let val = this.previousElementSibling.value; if (!val || val > self.pageT || val < 1) { alert("参数超出范围！"); return false; } else { self.options.page = val; self.rander(self.options.page, self.options.size, self.options.total); } }; fun(self.options.page, self.options.size, self.options.total); }; proto.switchSize = function (fun) { let self = this; let lis = this.page_nation.children[1]; lis.onchange = function () { self.options.size = Number(this.value); self.rander(1, self.options.size, self.options.total); fun(1, self.options.size, self.options.total); } }; return pageNation;})(); |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/zyfacd/article/details/105416424
