jQuery分页插件pagination.js

所属分类:导航-分页

 128958  237  查看评论 (291)
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分页插件bs_pagination

bs_pagination是jQuery分页插件,基于Bootstrap。完全可配置的,响应网页设计。
  分页
 37726  131

jQuery前端分页插件pageGroup.js

一款非常简洁漂亮方便调用的jQuery前端分页,没有多余的JS和文件,页面多可隐藏
  分页
 22828  81

jQuery分页插件jQuery.pager.js

表格分页,li分页
  分页
 22106  44

jQueryPaging分页数据获取插件

基于jQuery的分页及数据获取插件
  分页
 10958  34

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

    骡子大大 0
    2018/4/20 15:48:09
    怎么给页码加跳转参数? 回复
    BeyondSky 0
    2018/4/13 17:43:41
    当数据总数为0的时候(没查到数据的时候),就会有9页,怎么解决
        BeyondSky0
        2018/4/13 17:47:43
        也就是说,初始化的时候totalData = 0;仍然会显示默认的9页,而不是直接不显示
        BeyondSky0
        2018/4/13 17:49:18
        可以了,直接把9改成0就好了,,,
    回复
    淡淡的回忆只是一场哑剧丶 0
    2018/4/10 11:19:30

    Uncaught TypeError: $(...).pagination is not a function    
    一直报这个错误  

    <link rel="stylesheet" href="css/jquery.pagination.css">

    引入的都有

    回复
    明宝宝 0
    2018/4/9 9:59:09
    您的样式呢?css文件引入完全没有效果
        西瓜0
        2018/4/10 11:39:56
        pagination.css这个不就是样式文件吗。
        BeyondSky0
        2018/4/13 12:48:31
        我也是没有样式没效果,功能已经实现
        唯★美秋@之恋?0
        2018/4/18 9:55:33
        分页的html上加个class为m-style就好了 引入的css里面有
    回复
    沙哑的歌 0
    2018/4/7 16:09:21

    原代码中的$document对象的keydown事件和$obj的input propertychange事件,没有先释放后绑定,导致重复调用会不断幂次绑定相同事件,所以建议更正为【一下为更正后的代码】

    // 输入跳转的页码
    $obj.off().on('input propertychange', '.' + opts.jumpIptCls, function() {
        var $this = $(this);
        var val = $this.val();
        var reg = /[^\d]/g;
        if (reg.test(val)) $this.val(val.replace(reg, ''));
        (parseInt(val) > pageCount) && $this.val(pageCount);
        if (parseInt(val) === 0) $this.val(1); //最小值为1
    });
    //回车跳转指定页码
    $document.off().on('keydown', function(e) {
        if (e.keyCode == 13 && $obj.find('.' + opts.jumpIptCls).val()) {
            var index = parseInt($obj.find('.' + opts.jumpIptCls).val());
            that.filling(index);
            typeof opts.callback === 'function' && opts.callback(that);
        }
    });
    回复
    大师兄 0
    2018/4/5 16:03:16
    李时珍滴皮 0
    2018/3/28 22:02:32
    反馈一下BUG,当mode为fixed时且pageCount等于4的时候,第一页会出现5页(1,2,3,4,5)点到第4页会出现第0页 (0,1,2,3,4)
        aaae3440
        2018/4/4 12:33:03
        这个问题是什么原因呢?
    回复
    STYXHELIX 0
    2018/3/28 17:56:29

    为什么callback里的函数不执行?

    $(".pages").pagination({
                totalData: 100,
                showData: 10,
                // pageCount: 10,
                mode: 'fixed',
                jump: true,
                coping: true,
                keepShowPN: true,
                // homePage: '首页',
                // endPage: '末页',
                prevContent: '上一页',
                nextContent: '下一页',
                callback: function(api) {
                    console.log(api.getCurrent());
                    // pages = api.getCurrent();
                    // return pages;
                    $(".readall").html(api.getCurrent());
                    // $(".total").html("共"+10+"页,跳转至第");	       
                }
    回复
    YunMW 0
    2018/3/23 18:31:33
    怎么一直报错,对象不支持pagination方法 回复
    MirFisher 0
    2018/3/21 14:15:50

    插件好像是有个小BUG,初始化时候pageCount,在以后调用setPageCount,修改这个值以后,并不能修改绑定事件中对应的pageCount,进行绑定事件

    this.eventBind = function () {}

    中的 

    var pageCount = that.getPageCount() ;

     应该放在每一个绑定事件中;
    请大家看下,对不对。

    回复
取消回复