jQuery分页插件pagination.js

所属分类:导航-分页

 162169  259  查看评论 (318)
jQuery分页插件pagination.js ie兼容6

更新时间:2018/1/12 下午5:50:39

更新说明:增加固定按钮数量模式,具体请查看文档


更新时间:2017/9/21 上午10:06:18

更新说明:优化分页逻辑


更新时间:2017/3/27 上午9:22:41

更新说明:

更改了api参数,增加是否保持上下页按钮,为0时不显示分页


更新时间:2016-8-11

  1. 修复总数据为0时不显示分页。

  2. 修复总数据为1时显示默认总页数bug,改成不显示分页。

  3. 增加了this.setTotalPage(page);方法


简单使用方法

html

<div class="box"></div>

js

$('.box').pagination();

配置信息

pageCount:总页数(默认值:9)
totalData:数据总条数(默认值:0)
showData:每页展示条数(默认值:0)
current:当前第几页(默认值:1)
prevCls:上一页class样式(默认值:'prev')
nextCls:下一页class样式(默认值:'next')
prevContent:上一页节点内容(默认值:'<')
nextContent:下一页节点内容(默认值:'>')
activeCls:当前选中样式(默认值:'active')
count:当前页前后页数(默认值:3)
coping:是否开启首页尾页(默认值:false)
homePage:首页节点内容(默认值:1)
endPage:尾页节点内容(默认值:当前最大页数)
callback():回调函数
相关插件-分页

基于jquery和bootstrap的分页插件jqPaginator.js

基于jquery的分页插件,引入jquery.js 、bootstrap.css该插件即可
  分页
 21277  47

bootstrap paginat分页优化

增加显示当前页码、总页数,输入页码跳转,并且插件中的英文提示和注释都翻译成了中文
  分页
 15682  49

jquery分页插件

堪称完美jquery分页插件
  分页
 25503  103

jQuery分页插件jQuery.pager.js

表格分页,li分页
  分页
 24421  45

讨论这个项目(318)回答他人问题或分享插件使用方法奖励jQ币

    chenlkissmm 0
    2018/7/7 18:27:32
    ios设备,页码按钮按完抬起手,hover效果未能消失,需要再次触摸屏幕才能消失。android设备都正常。
    尝试用touchend()方法解决,没成功。有没有遇到同类问题的,请问怎么解决的 回复
    zzz。 0
    2018/6/28 11:03:52
    console.log(result.data.totalCount, pageSize)
    $('#messgaelistpagin').pagination({
        pageCount: util.getTotalPages(result.data.totalCount, pageSize),
        jump: true,
        coping: true,
        prevContent: '上页',
        nextContent: '下页',
        callback: function(api) {
            getmessagelist(api.getCurrent());
        }
    });

    方法写在callback回调里面,点击页数的时候永远在第一页,有哪位兄弟碰到过吗

        leijee0
        2018/7/16 11:18:21
        util.getTotalPages(result.data.totalCount, pageSize) 应该是一个ajax获取数据的吧?是同步的还是异步的方法呢?要是异步的话,估计pageCount获取就会有问题吧
    回复
    -FaIr 0
    2018/6/23 0:11:21
    首页 尾页位置怎么不是在最前面和最后面...怎么改? 回复
    要珍惜 0
    2018/6/20 16:33:44
    引入样式以后没效果 回复
    NING 0
    2018/6/14 22:45:49
    希望更新下能够兼容ie8 回复
    ?在黎明破?前 0
    2018/6/11 10:58:28
    为什么不支持IE8啊? 回复
    空城 0
    2018/6/7 12:49:39
    你好,点击分页的时候在移动端上面会同时出现两个active的样式,这问题要怎么解决啊? 回复
    半塘先生 0
    2018/6/5 16:46:07
    @ahthor,大神您好,<link rel="stylesheet" href="css/jquery.pagination.css">,已经引入了样式表,但是没有一点样式,页码等显示信息完全挤到了一块儿,请问这是怎么回事?
        半塘先生0
        2018/6/5 16:49:34
        已解决!
        要珍惜0
        2018/6/20 16:33:13
        怎么解决的
    回复
    对不起、我现在才找到你 0
    2018/5/25 13:49:19
    楼主你好,我使用了这个插件遇到了一个问题,就是我在点击第二页的时候,除了显示了第二页的数据,之前第一页的数据也还显示着,这时候如果在点击第一页,又还显示着之前第一页跟第二页的数据,而且还显示这一次第一页的数据,就是数据没有刷新,这个我要怎么处理
        我是女汉纸没有眼泪0
        2018/7/6 11:15:10
        每次刷新数据的时候先清空之前的数据啊
    回复
    骡子大大 0
    2018/5/18 10:41:44

    初始化数据里面,我要填写什么东西呢?

    $('.M-box4').pagination({
        totalData: totalCount,
        showData: 5,
        jump: true,
        callback: function(api) {
            var data = {
                pageNum: api.getCurrent(),
                pageSize: 5
            };
            $.getJSON('<%=basePath%>admin/resources/resourceList.jhtml', data, function(json) {
                vmm.mydatas = json.datas;
            });
        }
    }, function(api) {
        var this_page = api.getCurrent();
        alert(this_page)
    });
    回复
取消回复