jQuery分页插件(原创)

所属分类:导航-分页

 20555  53  查看评论 (93)
jQuery分页插件(原创) ie兼容8

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

相关插件-分页

超实用的angular.js无刷新分页完整案例

超实用的angular.js无刷新分页完整案例(需要放到服务器下运行!)
  分页
 16055  93

超实用精简的分页插件

精简实用的分页插件跨域调用的聚合的api分页逻辑简单易懂接口已经写好
  分页
 10441  15

jquery分页插件

堪称完美jquery分页插件
  分页
 25060  101

jQuery翻页插件simplePagination

jQuery翻页插件simplePagination
  分页
 27932  64

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

    Mrjiangke 0
    2018/6/13 13:53:48
    你好,作者!这个初始化时,能不能设置默认页数!
        酷酷的小k0
        2018/6/13 18:43:37
        每页显示条数可以默认设置,指定页码不能默认设置
    回复
    anibaobei 0
    2018/5/16 14:34:13
    大神 求解答 我的只有首页 尾页 上一页和下一页 回复
    ?? 0
    2018/5/15 12:02:20
    能不能10页的翻阅 回复
    ☆?~*** 0
    2018/5/11 16:43:54
    我为什么点击下一页传递过来的currPage是11 ,本应该为2
        酷酷的小k0
        2018/5/11 16:44:31
        你是不是字符串相加了?你自己看下
    回复
    ☆?~*** 0
    2018/5/11 16:43:03

    我点击下一页为啥传递过来的currPage是11,本应该为2,我可以在回调方法里面这样吗?

    $("#pagination_7").whjPaging({
           totalPage: totalPageNum,
           showPageNum: showPageNum,
           isShowFL: false,
           isShowPageSizeOpt: false,
           isShowSkip: false,
           isShowRefresh: false,
           isShowTotalPage: true,
           isResetPage: false,
           callBack: function (currPage, pageSize) {
           	alert(currPage);
    // 请看这里的代码
           	$("div[name='whj_nextPage']").click(function(){
           	currPage = currentPage + 1;
           	});
           	alert(currPage+":")
           	var year = $(".time-select").find("li.active a.active span.year").first().text();
           	var mon = $(".time-select").find("li.active a.active span.month").first().text();
           	var yearAndMon = year+"年"+mon+"月";
           	var form_action = "housing-Market-Opening-This-Month?action=changePage&yearAndMon="+yearAndMon+"¤tPage="+currPage;
           	$("form#data").attr("action",form_action);
           	$("form#data").submit();
           }
       });
    回复
    喂,你叫嘛名? 0
    2018/5/7 11:07:06
    您好,这个怎么显示总条数? 回复
    Niki 0
    2018/5/2 18:55:47
    Uncaught TypeError: Cannot read property 'pageText' of undefined
       at init.whjPaging (pagination.min.js:7)
       at Object.success (ware_index?sso_service_ticket=18255a1d77394f47bb7f3d1aba07cde7:720)
       at l (jquery.js:2)
       at Object.fireWith [as resolveWith] (jquery.js:2)
       at T (jquery.js:2)
       at XMLHttpRequest.r (jquery.js:2)
    whjPaging @ pagination.min.js:7
    success @ ware_index?sso_service_ticket=18255a1d77394f47bb7f3d1aba07cde7:720
    l @ jquery.js:2
    fireWith @ jquery.js:2
    T @ jquery.js:2
    r @ jquery.js:2
    XMLHttpRequest.send (async)
    send @ jquery.js:2
    ajax @ jquery.js:2
    loadData @ ware_index?sso_service_ticket=18255a1d77394f47bb7f3d1aba07cde7:708
    (anonymous) @ ware_index?sso_service_ticket=18255a1d77394f47bb7f3d1aba07cde7:701
    l @ jquery.js:2
    fireWith @ jquery.js:2
    ready @ jquery.js:2
    A @ jquery.js:2
        Niki0
        2018/5/2 18:56:20
        报错这个什么意思呢???
    回复
    - 她说年少轻狂 ~ 0
    2018/4/17 16:45:55
    1.6版本的,为什么只初始化一次了,我ajax请求会数据来再次渲染的时候还是上次的分页,上一页下一页还可以用,但是我就一条数据 回复
    小小欣 0
    2018/4/3 18:01:19
    很好用的说,而且样式可以自己修改或自定义,分页也可以自定义显示 回复
    陈亮(CL) 0
    2018/3/30 17:02:56
    怎么获取源码?
        酷酷的小k0
        2018/3/30 17:03:51
        压缩过了,不提供源码,抱歉!
        陈亮(CL)0
        2018/3/30 17:11:02
        建议添加总记录数的显示
    回复
取消回复