# 前端分页做来玩玩
分页常见于数据量大的时候，但是一般都是后端来实现的，前端请求就完事了，现在就前端也想来研究一下，大约实现了下功能，还有待优化。
# html
结构包含首页尾页，上一页下一页，自定义输入页码。
<div class="main">
<ul>
<li class="first" id="home">首页</li>
<li class="first" id="before">上一页</li>
<li id="number"></li>
<li class="first" id="next">下一页</li>
<li class="first" id="last">尾页</li>
<li class="current"></li>
<li class="jump">
<input type="text" id="inp">
<div class="l_jump">确定</div>
</li>
</ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
* {
padding: 0;
margin: 0;
}
ul, li {
list-style: none;
}
input {
outline: none;
box-sizing: border-box;
}
.first {
color: #666;
display: inline-block;
vertical-align: top;
border: 1px solid #ccc;
padding: 5px 9px;
font-size: 12px;
cursor: pointer;
}
#number {
display: inline-block;
vertical-align: top;
}
.num {
color: #666;
display: inline-block;
vertical-align: top;
border: 1px solid #ccc;
background-color: #fff;
padding: 5px 9px;
font-size: 12px;
margin-right: 6px;
cursor: pointer;
}
.current {
color: #3e89fa;
font-size: 12px;
display: inline-block;
vertical-align: top;
margin-left: 2px;
padding: 5px 9px;
}
#inp {
height: 29px;
width: 50px;
border: 1px solid #ccc;
padding: 0 4px;
}
.jump {
display: inline-block;
vertical-align: top;
font-size: 12px;
}
.l_jump {
display: inline-block;
vertical-align: top;
border: 1px solid #ccc;
padding: 5px 9px;
cursor: pointer;
color: #666;
}
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
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
var sign = 1; // 记录当前第几个块，如果最多为10个块，那么就是1-10
var b_sign = 1; // 记录sign变动之前的sign的数值
var count = 20; // 记录总共页数
var real_count=count<=10?count:10; // 定义最多有多少块
var real_change=0;
var o = 0;
if (real_count%2==0){
real_change=real_count/2;
} else {
real_change=real_count/2+0.5;
var o=1;
}
// 初始化模块
let i = 1;
while(i<=real_count) {
var val="<div class='num' id="+i+">" +i+"</div>";
$("#number").append(val);
i++;
}
// 查找id='number'块的所有子节点
function query_all(){
nodes = $("#number").find("div");
length=nodes.length;
};
query_all();
// 获取当前page
function currentPage() {
let use="#"+sign;
$(".current").text("当前"+$(use).text()+"/"+count+"页");
};
currentPage();
//将当前第sign块样式还原
var b_change=function(){
b_sign=sign;
let use="#"+b_sign;
$(use).css({"border":"1px solid #cccccc","backgroundColor":"#fff","color":"#666"})
}
// 将当前sign块样式改变，好区别于其他块
var blue_change=function(c){
let use="#"+c;
$(use).css({"border":"#3e89fa","backgroundColor":"#3e89fa","color":"#ffffff"});
}
// 页面第一次加载的时候，改变指定块样式
blue_change(sign);
// 当前sign块先还原样式，再改变sign，再改变改变后的sign块样式
function go_back(now_sign,kit) {
b_change();
if(kit==0) {
sign=now_sign;
} else if(kit==1) {
if(sign!=real_count)
sign++;
} else if(kit==2) {
if(sign!=1)
sign--;
}
blue_change(sign);
}
// 遍历改变id="number"的子节点内容
function change_add(c_add,kit) {
var p=c_add;
for(let j=0;j<length;j++) {
if(kit==0) {
nodes[j].innerHTML=p;
p++;
} else if(kit==1){
nodes[j].innerHTML=p;
p--;
} else if(kit==2){
nodes[j].innerHTML=parseInt(nodes[j].innerHTML)+1;
} else if(kit==3) {
nodes[j].innerHTML=parseInt(nodes[j].innerHTML)-1;
}
}
}
function for_num(use,id) {
let error_1="#"+real_change;
// 页面在最前或者最后
if($(error_1).text()==real_change||$(error_1).text()==count-real_change+1) {
// 判断点击的第一个一半的前面还是点击的第二个一半的后面
if($(use).text()<=real_change||$(use).text()>count-real_change) {
go_back(id,0);
} else {
go_back(real_change,0);
change_add($(use).text()-(real_change-1),0);
}
currentPage();
} else {
var inner=(o==0)?$(use).text()>=count-real_change:$(use).text()>count-real_change;
if($(use).text()<=real_change||inner) {
if($(use).text()<=real_change) {
go_back($(use).text(),0);
change_add(1,0);
} else {
go_back(real_count-(count-$(use).text()),0);
change_add(count-real_count+1,0);
}
} else {
go_back(real_change,0);
change_add($(use).text()-(real_change-1),0);
}
}
currentPage();
}
// 遍历每个div块，并为他们增加点击事件
for(let j=0;j<length;j++)
{
let id=nodes[j].getAttribute("id");
let use="#"+id;
$(use).bind("click",function(){
for_num(use,id);
});
}
$("#home").bind("click",function() {
go_back(1,0);
change_add(1,0);
currentPage();
});
$("#before").bind("click",function() {
let use="#"+sign;
var inner=(o==0)?$(use).text()>=count-real_change:$(use).text()>count-real_change+1;
if($(use).text()<=real_change||inner) {
go_back(0,2);
currentPage();
}
})
$("#next").bind("click",function(){
let use="#"+sign;
if($(use).text()!=count) {
var inner = (o==0)?$(use).text()>=count-real_change:$(use).text()>count-real_change;
if($(use).text()<real_change||inner) {
go_back(0,1);
currentPage();
} else {
change_add(0,2);
currentPage();
}
}
})
$(".l_jump").bind("click",function(){
let val=$("#inp").val(); // 获取输入框的值
val=parseInt(val);
if(val>=1&&val<=count) {
var inner=(o==0)?val>=count-real_change:val>count-real_change;
// 如果是最前面的一半以前，或者是最后面的一半以后
if(val<=real_change||inner) {
if(val<=real_change) {
go_back(val,0);
change_add(1,0);
} else {
go_back(real_count-(count-val),0);
change_add(count-real_count+1,0);
}
} else {
go_back(real_change,0);
change_add(val-(real_change-1),0);
}
} else {
alert("没有这么多页")
}
currentPage()
})
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
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
例子展示
以上
浏览链接： https://asazws.github.io/Duck-leg/demo/pageTurning/index.html