jQuery分页插件(原创)

所属分类:导航-分页

 171241  390  查看评论 (126)
分享到微信朋友圈
X
jQuery分页插件(原创) ie兼容8

更新日期: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第一个版本

相关插件-分页

官网分页特效

官网分页特效
  分页
 42028  394

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

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

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

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

自己编写的jquery分页插件,通用性很强(原创)

只需要传递后台获取的数据总条数和每页数量,回调返回当前页码数用于ajax请求
  分页
 28338  312

讨论这个项目(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 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复