demo.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
27
28
29
30
31
32
33
34
35
36
37
38
|
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<
html
class
=
"no-js"
>
<!--<![endif]-->
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge,chrome=1"
>
<
title
></
title
>
<
meta
name
=
"description"
content
=
""
>
<
meta
name
=
"viewport"
content
=
"width=device-width"
>
<!-- 自有CSS -->
<
link
href
=
"static/css/plugin/ys_pagination.css"
rel
=
"stylesheet"
>
</
head
>
<
body
>
<
div
id
=
"pagination"
></
div
>
<!-- 第三方js -->
<
script
src
=
"static/dist/js/jquery-1.11.3.min.js"
></
script
>
<!-- 自有plugins -->
<
script
src
=
"static/js/plugin/ys_pagination.js"
></
script
>
<
script
>
$("#pagination").ysPagination({
totalPageCount:200,
callback:function(pageNo){
console.log("retrieve the data for pageNo : "+pageNo);
}
});
</
script
>
</
body
>
</
html
>
|
ys_pagination.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
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
|
.ys-pagination:after{
content
:
""
;
display
:
block
;
height
:
0
;
clear
:
both
;
visibility
:
hidden
;}
.ys-pagination .ys-pagination-slices{
font-size
:
0
;
float
:
left
;
}
.ys-pagination .ys-pagination-slices a{
display
:inline-
block
;
min-width
:
30px
;
height
:
30px
;
text-decoration
:
none
;
line-height
:
30px
;
text-align
:
center
;
color
:
#222
;
cursor
:
pointer
;
border
:
1px
solid
#ccc
;
font-size
:
12px
;
margin-right
:
10px
;
}
.ys-pagination .ys-pagination-slices a:hover{
background-color
:
#eaeaea
;
}
.ys-pagination .ys-pagination-slices a.active{
color
:
#fff
;
background-color
:
#e64e4d
;
border
:
1px
solid
#e64e4d
;
}
.ys-pagination .ys-pagination-slices a.next-page{
padding
:
0
10px
;
}
.ys-pagination .ys-pagination-slices span{
display
:inline-
block
;
vertical-align
:
text-bottom
;
font-size
:
12px
;
margin-right
:
10px
;
}
.ys-pagination .ys-pagination-navigation{
height
:
30px
;
float
:
left
;
font-size
:
12px
;
line-height
:
30px
;
color
:
#999
;
}
.ys-pagination .ys-pagination-navigation input{
width
:
50px
;
height
:
30px
;
border
:
1px
solid
#ccc
;
padding-left
:
8px
;
color
:
#999
;
margin
:
0
10px
;
}
.ys-pagination .ys-pagination-navigation a.go{
display
:inline-
block
;
width
:
50px
;
height
:
30px
;
background-color
:
#eaeaea
;
color
:
#999
;
line-height
:
30px
;
text-decoration
:
none
;
text-align
:
center
;
cursor
:
pointer
;
margin
:
0
0
0
10px
;
}
|
ys_pagination.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
|
(
function
($){
var
defaultSettings = {
displayEntryCount: 4,
// 连续分页主体部分显示的分页条目数
edgeEntryCount: 2,
//两侧显示的首尾分页的条目数
totalPageCount:50,
// 页面总数
currentPageNo:1,
// 当前页面
callback:
function
(pageNo){
// 点击之后的回调函数
console.log(
"callback:"
+pageNo);
}
};
// 默认设置
// 添加隐藏的
function
renderPagination(container,settings){
var
totalPageCount = settings.totalPageCount;
var
currentPageNo = settings.currentPageNo;
var
slicesHtml =
"<div class='ys-pagination-slices'> "
+
" <a class='active'>1</a> "
+
" <a>2</a> "
+
" <a>3</a> "
+
" <a>4</a> "
+
" <a>5</a> "
+
" <span>...</span> "
+
" <a>10</a> "
+
" <a class='next-page'>下一页</a> "
+
"</div> "
;
var
navigationHtml =
"<div class='ys-pagination-navigation'>"
+
" <span>共"
+totalPageCount+
"页</span>"
+
" <span>去第</span> "
+
" <input type='text'/> "
+
" <span>页</span> "
+
" <a class='go'>跳转</a> "
+
"</div> "
;
$(container).html(slicesHtml+navigationHtml);
// 渲染分页区域
$(container).addClass(
"ys-pagination"
);
renderPaginationSlicesHtml(currentPageNo,container,settings);
$(container).find(
"input"
).val(currentPageNo);
}
function
generateSliceItem(currentPageNo,index){
if
(index==currentPageNo){
return
"<a class='active' data-index='"
+index+
"'>"
+index+
"</a>"
;
}
return
"<a data-index='"
+index+
"'>"
+index+
"</a>"
;
}
function
renderPaginationSlicesHtml(currentPageNo,container,settings){
var
slicesHtml =
""
;
var
displayEntryCount = settings.displayEntryCount;
var
edgeEntryCount = settings.edgeEntryCount;
var
totalPageCount = settings.totalPageCount;
if
(totalPageCount<=edgeEntryCount*2+displayEntryCount){
for
(
var
i=1;i<=totalPageCount;i++){
slicesHtml+=generateSliceItem(currentPageNo,i);
}
}
else
if
(currentPageNo<=edgeEntryCount+parseInt(displayEntryCount/2)){
// 连续分页主体部分紧连首分页
for
(
var
i=1;i<=edgeEntryCount+displayEntryCount;i++){
slicesHtml+=generateSliceItem(currentPageNo,i);
}
slicesHtml+=
"<span>...</span>"
;
for
(
var
i=totalPageCount-edgeEntryCount+1;i<=totalPageCount;i++){
slicesHtml+=generateSliceItem(currentPageNo,i);
}
}
else
if
(currentPageNo>=totalPageCount-(edgeEntryCount+displayEntryCount-parseInt(displayEntryCount/2)-1)){
// 连续分页主体部分紧连尾分页
for
(
var
i=1;i<=edgeEntryCount;i++){
slicesHtml+=generateSliceItem(currentPageNo,i);
}
slicesHtml+=
"<span>...</span>"
;
for
(
var
i=totalPageCount-edgeEntryCount-displayEntryCount+1;i<=totalPageCount;i++){
slicesHtml+=generateSliceItem(currentPageNo,i);
}
}
else
{
for
(
var
i=1;i<=edgeEntryCount;i++){
slicesHtml+=generateSliceItem(currentPageNo,i);
}
slicesHtml+=
"<span>...</span>"
;
// main body ...
for
(
var
i=currentPageNo-parseInt(displayEntryCount/2);i<=currentPageNo+displayEntryCount-parseInt(displayEntryCount/2)-1;i++){
slicesHtml+=generateSliceItem(currentPageNo,i);
}
slicesHtml+=
"<span>...</span>"
;
for
(
var
i=totalPageCount-edgeEntryCount+1;i<=totalPageCount;i++){
slicesHtml+=generateSliceItem(currentPageNo,i);
}
}
//var slicesHtml = "<a class='active'>1</a> "+
// "<a>2</a> "+
// "<a>3</a> "+
// "<a>4</a> "+
// "<a>5</a> "+
// "<span>...</span> "+
// "<a>10</a> "+
// "<a class='next-page'>下一页</a> ";
slicesHtml+=
"<a class='next-page'>下一页</a>"
;
$(container).find(
".ys-pagination-slices"
).html(slicesHtml);
}
/* 事件绑定 */
function
bindEventHandlers(container,settings){
var
callback = settings.callback;
// 绑定a点击事件
$(container).on(
"click"
,
".ys-pagination-slices a:not(.next-page)"
,
function
(e){
e.preventDefault();
e.stopPropagation();
$(container).find(
".ys-pagination-slices a"
).removeClass(
"active"
);
$(
this
).addClass(
"active"
);
var
pageNo = parseInt($(
this
).attr(
"data-index"
));
renderPaginationSlicesHtml(pageNo,container,settings);
$(container).find(
"input"
).val(pageNo);
callback(pageNo);
});
// 绑定下一页点击事件
$(container).on(
"click"
,
".ys-pagination-slices a.next-page"
,
function
(e){
e.preventDefault();
e.stopPropagation();
var
pageNo = parseInt($(container).find(
"a.active"
).attr(
"data-index"
));
if
(pageNo<settings.totalPageCount){
pageNo++;
}
$(container).find(
".ys-pagination-slices a"
).removeClass(
"active"
);
$(container).find(
".ys-pagination-slices a[data-index="
+pageNo+
"]"
).addClass(
"active"
);
renderPaginationSlicesHtml(pageNo,container,settings);
$(container).find(
"input"
).val(pageNo);
callback(pageNo);
});
$(container).on(
"keypress"
,
"input"
,
function
(e){
e.stopPropagation();
if
(e.keyCode<48||e.keyCode>57){
e.preventDefault();
}
});
$(container).on(
"click"
,
"a.go"
,
function
(e){
e.stopPropagation();
e.preventDefault();
var
pageNo = $(container).find(
"input"
).val();
pageNo = parseInt(pageNo);
$(container).find(
".ys-pagination-slices a"
).removeClass(
"active"
);
$(container).find(
".ys-pagination-slices a[data-index="
+pageNo+
"]"
).addClass(
"active"
);
renderPaginationSlicesHtml(pageNo,container,settings);
callback(pageNo);
});
}
var
options = {
ysPagination:
function
(settings) {
var
mergedSettings = {};
$.extend(mergedSettings,defaultSettings,settings);
renderPagination(
this
,mergedSettings);
bindEventHandlers(
this
,mergedSettings);
}
};
$.fn.extend(options);
})(jQuery);
|
本文转自 antlove 51CTO博客，原文链接:http://blog.51cto.com/antlove/1742468
