jQuery分页插件

插件描述: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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值