jQuery分页插件(原创)

所属分类:导航-分页

jQuery分页插件(原创) ie兼容8

更新日期:2018-01-18 23:00:00

更新内容:增加getPage方法返回每页显示条数// [当前页码, 总页数, 每页显示条数]

$("#pagination").whjPaging("getPage");

更新日期:2018-01-17 22:00:00

更新内容:修改初始化分页插件参数选项css,填写默认样式css-1无效


更新日期:2018-01-16 00:00:00

更新内容:优化初始化插件参数 isResetPage: true,当该参数设为true时,那么在ajax响应成功时必须调用

$("#pagination").whjPaging("setPage", 当前页码, 总页数);

如果ajax未响应之前,那么分页显示保持不变。

提问者:为什么这么设计?

回答:这样设计保证了分页显示和数据展示保持一致。

特殊情况:

当参数isResetPage设为true时,假设目前分页显示的是第1页,每页5条,这时候点击下一页两次,第一次点击时,网络刚好断了,第二次点击时,网络刚好连接上,这时回掉函数返回的值是第2页,每页5条,可以理解为,最后一次操作有效,当然,正常交互过程中是不会影响页面的展示。

补充说明:

该插件适合与ajax结合使用,不建议与URL跳转结合使用,初始化插件参数isResetPage,如果是与后台交互,那么建议设置为true,如果只是静态数据的展示,那么建议设置为false。

注意点:

如果插件有设置显示每页N条下拉框,那么获取数据必须是一次获取N条


更新日期:2018-01-12 02:00:00

更新内容:当前页码小于1时,默认为1,

当前页码大于总页数时,默认等于最后一页,

由于调用该方法可能会与其他插件冲突,该方法重新命名,

修改样式文件名称

更新日期:2017-12-27 01:05:00

更新内容:优化及调整css


使用方法:

1.引入样式和脚本

2.调用插件

$("#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.获取当前页码及总页数

// [当前页码, 总页数]
$("#pagination").whjPaging("getPage");

4.设置当前页码及总页数

//参数2: 当前页码, 参数3: 总页数
$("#pagination").whjPaging("setPage", 1, 10);

5.可自定义样式

具体请详细看pagination.css


更新日期:2017-12-27 01:05:00

更新内容:优化及调整css第一个版本

相关插件-分页

jQuery分页插件bs_pagination

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

jQuery翻页插件simplePagination

jQuery翻页插件simplePagination
  分页
 25777  62

一款非常简洁漂亮方便调用的jQuery前端分页

一款非常简洁漂亮方便调用的jQuery前端分页,没有多余的JS和文件。
  分页
 39364  84

简单的Vue分页插件pagination.js

分页插件,带省略的Vue分页插件
  分页
 10265  39

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

    刘哲-上海船奇物流 0
    2018/1/23 13:48:09

    第一次网页刷新是4页,每页100条数据,为什么我点击搜索后,明明只有4条数据。应该只有一页。但是还是显示原来的4页,每页100条

        酷酷的小k0
        2018/1/23 14:23:10

        ajax回调成功调用  setPage 方法就行

        刘哲-上海船奇物流0
        2018/1/23 15:37:35

        我是下拉框的不对。我每页才10条数据,但是下拉框显示100条

        酷酷的小k0
        2018/1/23 16:25:47

        下拉框、table显示条数需要手动设置成一样的,插件描述都有说明

        刘哲-上海船奇物流0
        2018/1/23 16:50:13

        能具体说一下吗?

    回复
    CHENX 0
    2018/1/22 16:53:51
    同一个页面,分页插件只能初始化一次吗?多个ajax请求回来的数据,共用这一个分页,页面上的分页状态还停留在第一次,求大佬帮忙看下,已加你QQ了1003996947
        酷酷的小k1
        2018/1/22 17:12:52

         一个table只能对应一个分页,一个页面可以初始化多个,注意初始化参数 isResetPage;使用ajax例子如下:

        function loadData(currPage, pageSize) {
            $.ajax({
                success: function(res) {
                    //初始化分页插件参数isResetPage设为true时,必须调用setPage方法   
                    $("#pagination").whjPaging("setPage", 当前页码, 总页数);
                }
            });
        }
        $("#pagination").whjPaging({
            isResetPage: true,
            callBack: function(currPage, pageSize) {
                loadData(currPage, pageSize);
            }
        });
        loadData(1, 5);
        CHENX0
        2018/1/22 18:01:16

        感谢,问题已经解决了!

    回复
    just比伯 0
    2018/1/19 17:07:49
    第一次进入页面回调函数不执行啊,这样没法刚进入页面就展示第一页的数据啊。。有大佬知道怎么解决吗
        酷酷的小k0
        2018/1/19 17:10:14
        第一次进入页面不是初始化分页插件嘛,怎么是回调函数?
    回复
    Napoléon Bonaparte、 0
    2018/1/18 14:02:03

    怎么获取每页大小,怎么动态设置每页大小(非初始化时)

    回复
    Y、s 0
    2018/1/17 16:59:54

    在么?我报这个错:$(...).whjPaging is not a function;怎么回事啊

        酷酷的小k0
        2018/1/17 17:02:24

        你是不是没有引入jquery?顺序引入css,jquery,pagination

        Y、s0
        2018/1/17 17:07:22

        我加你QQ了,389969914

    回复
    小明@ 0
    2018/1/16 22:00:35

    我终于搞好了,谢谢大佬。

    回复
    Napoléon Bonaparte、 0
    2018/1/16 17:41:18

    怎么与Knockout绑定

        酷酷的小k0
        2018/1/16 18:00:14

        没用过这个js库啊,一般用的比较多的是jquery库。

    回复
    . 0
    2018/1/15 0:15:57

    刷新页面永远是第一页

        酷酷的小k0
        2018/1/15 0:16:50

        刷新只会刷新当前页

        .0
        2018/1/15 0:18:19

        $("#pagination").whjPaging("setPage", 当前页码, 总页数);这条怎么用啊

        酷酷的小k0
        2018/1/15 0:19:09

        看楼下的

        .0
        2018/1/15 0:22:41
        <div id="pagination" style="float: right;">
        <input type="text" style="display:none; " id="readAllsum" value="${readAllsum}">
        </div>
        <!--页码 -->
        <script type="text/javascript">
        $("#pagination").pagination("setPage", 1, 10);//这条会报错
               $("#pagination").whjPaging({
                   totalPage: $("#readAllsum").val(),//总页数
                   showPageNum: 5,
                   isShowFL: false,
                   isShowPageSizeOpt: false,
                   isShowSkip: true,
                   isShowRefresh: true,
                   isShowTotalPage: true,
                   isResetPage: false,
                   callBack: function (currPage, pageSize) {
                   	location.href='readAll.dj?sate='+currPage;
                       console.log('currPage:' + currPage + '     pageSize:' + pageSize);
                   }
               });
        </script>
        酷酷的小k1
        2018/1/15 0:25:02
        $("#pagination").pagination("setPage", 1, 10);

        最新的为

        $("#pagination").whjPaging("setPage", 1, 10);
        .0
        2018/1/15 0:28:36

        谢谢

    回复
    竹子 0
    2018/1/12 23:24:13

    这个算页数是不是有问题啊

    我有12条数据,要每页显示15条,为什么会有2页,不行可以开放自己写啊

        酷酷的小k0
        2018/1/12 23:49:29

        下拉框默认显示每页5条,那么请求服务器时,也要要求一次查询5条数据,造成你这样的问题可能是你传入后台每页显示条数是10条,那么就会出现有两个页码

        竹子0
        2018/1/13 14:28:44

        没有,我传的是15,传10,20的我也都试过,可以正常显示,就是15的不行

        酷酷的小k0
        2018/1/13 16:34:37

        可以 把代码贴出看看嘛?

        酷酷的小k3
        2018/1/13 17:28:34

        按照你的要求,有12条数据,每页显示15条,这时候初始化分页插件有两种方式:

        1、参数设置  isResetPage: true  ,先初始化插件,然后请求服务器,每次查询15条,后台需要返回总页数,服务器响应成功之后,需要调用  

        $("#pagination").whjPaging("setPage", 当前页码, 总页数);

        才能生效,这种参数设置  isResetPage: true 主要目的是为了数据库的数据条数可能会发生变化,比如支付订单的记录;

        2、参数设置  isResetPage: false ,先初始化插件,然后拿取数据,每次展示15条,这时候可以不调用 

        $("#pagination").whjPaging("setPage", 当前页码, 总页数);

        这种参数设置  isResetPage: false 一般是静态数据的展示,但需要确定总页数才行;

        我自己用的话,获取数据库的数据一般是第一种情况,静态数据用第二种情况,这么讲不知道有没有帮到你

        竹子0
        2018/1/16 16:01:11

        不好意思最近忙别的去了,我先把每页15条的注释掉了,我的代码是:

        $("#pagination").pagination({
            pageSizeOpt: [{
                    'value': 10,
                    'text': '10条/页',
                    'selected': true
                },
                // {'value': 15, 'text': '15条/页'},
                {
                    'value': 20,
                    'text': '20条/页'
                }
            ],
            totalPage: parseInt((datas.totalCount + datas.pageSize - 1) / datas.pageSize),
            showPageNum: 5,
            firstPage: '首页',
            previousPage: '上一页',
            nextPage: '下一页',
            lastPage: '尾页',
            confirm: '确认',
            totalPageText: '共{}页',
            isShowFL: true,
            isShowPageSizeOpt: true,
            isShowSkip: false,
            isShowRefresh: false,
            isShowTotalPage: true,
            isResetPage: false,
            callBack: function(currPage, pageSize) {
                console.log('currPage:' + currPage + '     pageSize:' + pageSize);
                loadData(currPage, pageSize);
            }
        })
        酷酷的小k0
        2018/1/16 17:51:03
        parseInt((datas.totalCount + datas.pageSize - 1) / datas.pageSize)

        表示

        parseInt((总条数+每页显示条数-1)/每页显示条数)

        是吧?

        你有没有用f12去调试?用谷歌或360极速调试,选中这段

        parseInt((datas.totalCount + datas.pageSize - 1) / datas.pageSize)

        就可以看到值

        竹子0
        2018/1/16 19:21:20
        输出过了,算的值都是正确的,就是显示会有2页,第二页没有信息
        酷酷的小k0
        2018/1/16 20:32:06

        如果方便的话,帮你调试下,直接加这个qq:3519842327

    回复
    冲锋的大螃蟹 0
    2018/1/11 13:25:13

    不能用啊,引入文件?dom设置??  没点教程

        酷酷的小k0
        2018/1/11 13:29:24

        有写,上面不是有描述嘛

    回复
取消回复