UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

jQuery分页插件（原创）

所属分类：导航-分页

 174509  390  查看评论 (126)
分享到微信朋友圈
X
jQuery分页插件（原创） ie兼容8
 查看演示  website  立即下载

更新日期：2019-05-29 00:00:00

更新内容：1.7版本和1.8版本差别不大。

1.8版本增加了index页面描述，红色文字那一块。

1.8版本css样式优化了一下，把 vertical-align: bottom; 改成了 vertical-align: middle;

额外说明：

一、jq不会，请先学jq，不在分页插件问题解答范围内；

二、请先照着index页面的demo写分页代码，请仔细看index页面描述；

三、index页面所有的描述是最新的。

更新日期：2018-05-20 02:30:00

更新内容：添加总条数，可重新再次初始化插件，修改getPage方法返回数据为对象结构，修改setPage方法参数为对象结构，修复无总条数选择每页条数下拉框引起总页数的错误，修复isResetPage参数的相关代码

更新时间：2018/3/30 下午4:50:21
更新说明：有问题请加QQ号，不提供微信号，QQ号：3519842327，仅限该分页插件的解答

更新日期：20180205 23:00:00

更新内容：稍微优化css，在index.html增加描述，含ajax使用例子描述、静态数据使用例子描述、初始化分页插件参数描述、setPage | getPage方法描述

更新日期：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分页功能

 就是一个基础分页功能，支持加入ajax
  分页
 31122  198

jQuery分页插件pagination.build.js

 jQuery分页插件pagination.build.js根据页数生成页码，配置简单使用方便
  分页
 30210  316

jQuery分页插件jQuery.pager.js

 表格分页，li分页
  分页
 56489  337

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

 基于jquery的分页插件，引入jquery.js 、bootstrap.css该插件即可
  分页
 51306  328

讨论这个项目（126）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    你的笑意 0
    2023/4/17 16:48:02
    很好用，感谢大佬👍 回复
    ～～～ 0
    2021/9/9 17:04:06
    感谢大佬，相当好用🌹 回复
    yaketam 0
    2019/8/31 13:06:14

    帮我看看这样用对么?

    function loadData(currPage, pageSize) {
    $.ajax({
        //其它参数选项请自填
        type: "POST",
        url: "save.php?action=list",
        success: function(res) {
            //处理数据
            //这里的array是从后台获取的数据，类似<tr><td>1</td></tr>,<tr><td>2</td></tr>这样的
            var myArray = new Array()
            myArray = res.split(",");
            var listHtml = "";
            for (i = 0; i < pageSize; i++) {
                listHtml += myArray[i + currPage - 1];
            }
            $("#t").html(listHtml);
            //设置分页插件显示
            //res_currPage = 1;
            res_totalSize = myArray.length;
            res_totalPage = res_totalSize / pageSize;
            $("#pagination_8").whjPaging("setPage", {
                currPage: currPage,
                totalPage: res_totalPage,
                totalSize: res_totalSize
            });
        }
    });
}
$("#pagination_8").whjPaging({
    isResetPage: true,
    css: 'css-1',
    //totalSize: res_totalSize,
    //totalPage: res_totalPage,
    isShowTotalSize: true,
    isShowTotalPage: false,
    isShowRefresh: false,
    isShowSkip: false,
    isShowPageSizeOpt: false,
    callBack: function(currPage, pageSize) {
        loadData(currPage, 1);
        console.log('currPage:' + currPage + '     pageSize:' + pageSize);
    }
});

loadData(1, 1);
    回复
    yaketam 0
    2019/8/30 23:00:00
    我新手，想问下，是把要分页的内容放到callback里吗？
        酷酷的小k0
        2019/8/30 23:11:34
        不用，独立放一块代码就行，你参照我的demo看！
        yaketam0
        2019/8/31 8:32:07
        demo....处理数据么，不知道该是什么样格式的数据，一直没成功过，有没有带数据的演示啊
    回复
    guoxingzhi 0
    2019/8/26 15:42:42
    应如是 0
    2019/5/18 11:27:58
    pagination.min.js:10 Uncaught TypeError: Cannot read property 'pageText' of undefined
    at init.whjPaging (pagination.min.js:10)

    这个是因为什么呀 回复
    CC你这头蠢驴 1
    2019/4/27 11:21:01
    遇到了 小问题 记录下 就是点击下一页 页面样式跳转不准确 是后台传的数字变成字符串的问题 用parseInt()下 就正常了 顺便说下大神写的插件 很完美
        archsky1
        2019/5/20 10:36:57
        多谢，这个乱跳的问题困扰了我一个上午，反复设置都不行，最后才发现原来讨论的第一条就是解决办法
        yaketam0
        2019/9/2 11:52:51
        谢谢，谢谢，只有遇到的才知道是怎么回事，哈哈哈，2变11,1111,111111的解决办法，我是loadData(parseInt(currPage),pageSize)这么用的，不知道其他人，写清楚好看懂啊，我个人脑子比较愚钝，很多看不明白。
    回复
    心态很重要 0
    2019/4/13 15:47:49
    使用了isResetPage: true,属性后 点击数字 或者上一页下一页 点不动 点2 还在是1那里 但是2的值是传出来的
        心态很重要0
        2019/4/13 22:41:10
        已解决
        贺魁-深圳宏辉智通科技有0
        2019/5/27 10:43:23
        问下怎么解决的
        SONGW_0
        2019/5/27 18:05:24
        怎么解决的
    回复
    泡沫 0
    2019/3/18 11:41:06
    如何将显示页数几条的放在最前头
        酷酷的小k0
        2019/3/18 11:42:57
        你可以改代码，格式化一下
        泡沫0
        2019/3/18 11:53:17
        可是我下载下来的代码是压缩的
        就是pagination.min.css是吧
        酷酷的小k1
        2019/3/18 11:59:05
        pagination.css这个没压缩吧，是js才有压缩，js格式化一下就行了
        泡沫0
        2019/3/21 15:30:17
        谢谢大神,不过在vue引入后,显示 vue.esm.js?efeb:628 [Vue warn]: Error in created hook: "TypeError: Cannot set property 'pageText' of undefined"
    回复
    …… 0
    2019/1/28 16:27:36
    pagination.min.js:10 Uncaught TypeError: Cannot set property 'pageText' of undefined
    at w.fn.init.whjPaging (pagination.min.js:10)
    at 回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复