-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
129 lines (127 loc) · 5.01 KB
/
index.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
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta charset="utf-8" />
<title>xPagination.js 分页组件</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>xPagination.js Javascript分页组件</h1>
<p>
版本号：1.1 <br />
更新日期：2015-12-17 <br />
作者：<a href="http://jo2.org" target="_blank">脚儿网</a> <a href="#" target="_blank">实现思路解析</a><br />
Git地址：<a href="https://github.com/wslx520/wslx520.github.io/tree/master/pagination" target="_blank">可下载代码</a>
说明：本页使用了console，请打开调试工具;可查看本页源代码直接下载代码
</p>
<h2>更新记录：</h2>
<p>
2015/12/31: 修复一个大意之下的bug:点下一页按钮无效（会跳到第1页）
</p>
<p>
<b>使用方法：</b><br />
var xxx = xPagination(pagediv, options);<br />
其中pagediv是一个div节点，options是参数
</p>
<p>
<b>options参数说明：</b><br />
支持设置的选项： <br />
max : 最多同时显示好多页<br />
curr : 当前页码<br />
size : <del>每页显示多少条，默认15。可以是15,30,50的任一个，如果传为false，则不显示切换每页显示条数的标签</del><br />
<b>2015.12.17</b>:
size可以传入任何数字，如果不传值或传为false，则默认是15; 且不再与是否显示条数切换功能有关 <br />
pages : 总好多页。可以不传而只传items，则会由items和size计算出pages<br />
items : 总数据条数<b>推荐</b>。使用这个参数，可以在切换每页显示条数时，动态修正页码数量<br />
onpagination : 函数，在页码跳转时触发，此函数执行时会自动传入两个参数：page（当前页）, size（当前页显示条数）<br />
info : 是否显示页码信息，默认true，会加入一个page-text用来显示“共N页，当前是第n页”这样的信息<br />
<b>2015.12.17</b>: 新增功能，info可以是一个函数，此函数会接收options做为参数，返回一个字符串，插入到info的div中，且每次翻页都会刷新。
<br />
jump : 是否允许输入页码跳页，默认true,会加入一个页码输入框和确定按钮<br />
prev ：上一页按钮显示的文字，设为false则不显示上一页按钮，下同<br />
next ：下一页按钮显示的文字，同上<br />
last ：末页按钮显示的文字，同上；默认false <i>(2015/12/14 去掉此选项，因为页码算法的改变，页码在任何时候，都会显示第一页和最后一页的页码，用不着用按钮来跳了)</i><br />
first ：首页按钮显示的文字，同上；默认false <i>2015/12/14去除</i><br />
showSize : <b>2015.12.17</b>是否显示左侧的切换每页多少条，默认false。如果设为true，则会显示当前页码分别乘以1,2,3的size切换；如果设为一个数组如[20,40,80]，则会以此数组生成对应的size切换
</p>
<h2>xPagination实例的属性：</h2>
<p>
options : 对象，上面列出的静态设置选项 <br />
currPageElement : 当前页码的node<br />
pageList : Node数组，页码node的列表<br />
</p>
<h3>示例：</h3>
30/页，curr=2，max=8，info=true，jump=true，showSize为数组 <br />
<div id="pagediv"></div>
<br />
max=7，showSize=true <br />
<div id="pagediv1"></div>
<br />
showSize没传；max=10；curr=11；info为一个函数；jump=false：<br />
<div id="pagediv2"></div>
<br />
没有上下页; showSize是个数组：<br />
<div id="pagediv3"></div>
注：切换每页显示条数后，页码会重新生成，然后会自动跳到当前页最接近的页
<br />
注：样式不满意请自定义
<script src="xpagination.min.js" type="text/javascript"></script>
<script>
var pagediv = document.getElementById('pagediv');
var pagediv1 = document.getElementById('pagediv1');
var pagediv2 = document.getElementById('pagediv2');
var pagediv3 = document.getElementById('pagediv3');
var pagenav = xPagination(pagediv, {
max:8,
curr:2,
size:30,
pages:22,
jump:true,
showSize:[15,30,50],
onpagination: function (page, size) {
console.log('pagediv', page, size)
}
})
var pagenav1 = xPagination(pagediv1, {
max:7,
curr:1,
size:15,
items:586,
jump:true,
showSize:true,
onpagination: function (page, size) {
console.log('pagediv1', page, size)
}
})
var pagenav2 = xPagination(pagediv2, {
max:10,
curr:11,
size:30,
items:2222,
first:false,
last:false,
jump:false,
info: function (options) {
return '共'+options.items+'条，当前是'+((options.curr-1) * options.size)+'~'+(options.curr * options.size)+'条';
},
onpagination: function (page, size) {
console.log('pagenav2', page, size)
}
})
var pagenav3 = xPagination(pagediv3, {
max:10,
curr:1,
size:10,
items:36,
prev:false,
next:false,
jump:false,
showSize: [10,30,50],
onpagination: function (page, size) {
console.log('p3', page, size)
}
})
// pagenav.go(10)
</script>
</body>
</html>