插件描述:jQuery分页插件,可自定义样式,默认有五套样式,可自定义插件选项,简单方便
素材在文末
使用方法:
1.引入样式和脚本
<div id="pagination" style="float: right;">
<input type="text" style="display:none; " id="readAllsum" value="${readAllsum}">
</div>
2.调用插件
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
|
$(
"#pagination"
).whjPaging({
//可选,每页显示条数下拉框,默认下拉框5条/页(默认)、10条/页、15条/页、20条/页
pageSizeOpt: [
{
'value'
: 5,
'text'
:
'5条/页'
,
'selected'
:
true
},
{
'value'
: 10,
'text'
:
'10条/页'
},
{
'value'
: 15,
'text'
:
'15条/页'
},
{
'value'
: 20,
'text'
:
'20条/页'
}
],
//可选,css设置,可设置值:css-1,css-2,css-3,css-4,css-5,默认css-1,可自定义样式
css:
'css-1'
,
//可选,总页数
totalPage: 100,
//可选,展示页码数量,默认5个页码数量
showPageNum: 5,
//可选,首页按钮展示文本,默认显示文本为首页
firstPage:
'首页'
,
//可选,上一页按钮展示文本,默认显示文本为上一页
previousPage:
'上一页'
,
//可选,下一页按钮展示文本,默认显示文本为下一页
nextPage:
'下一页'
,
//可选,尾页按钮展示文本,默认显示文本为尾页
lastPage:
'尾页'
,
//可选,跳至展示文本,默认显示文本为跳至
skip:
'跳至'
,
//可选,确认按钮展示文本,默认显示文本为确认
confirm:
'确认'
,
//可选,刷新按钮展示文本,默认显示文本为刷新
refresh:
'刷新'
,
//可选,共{}页展示文本,默认显示文本为共{}页,其中{}会在js具体转化为数字
totalPageText:
'共{}页'
,
//可选,是否展示首页与尾页,默认true
isShowFL:
true
,
//可选,是否展示每页N条下拉框,默认true
isShowPageSizeOpt:
true
,
//可选,是否展示跳到指定页数,默认true
isShowSkip:
true
,
//可选,是否展示刷新,默认true
isShowRefresh:
true
,
//可选,是否展示共{}页,默认true
isShowTotalPage:
true
,
//可选,是否需要重新设置当前页码及总页数,默认false,如果设为true,那么在请求服务器返回数据时,需要调用setPage方法
isResetPage:
false
,
//必选,回掉函数,返回参数:第一个参数为页码,第二个参数为每页显示N条
callBack:
function
(currPage, pageSize) {
console.log(
'currPage:'
+ currPage +
' pageSize:'
+ pageSize);
}
});
|
3.获取当前页码及总页数
1
2
|
// [当前页码, 总页数]
$(
"#pagination"
).whjPaging(
"getPage"
);
|
4.设置当前页码及总页数
1
2
|
//参数2: 当前页码, 参数3: 总页数
$(
"#pagination"
).whjPaging(
"setPage"
, 1, 10);
|
5.可自定义样式
具体请详细看pagination.css
链接: https://pan.baidu.com/s/1c4atskS 密码: yfcb