jQuery分页插件(原创)

所属分类:导航-分页

 16155  41  查看评论 (83)
jQuery分页插件(原创) ie兼容8

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

相关插件-分页

简单的Vue分页插件pagination.js

分页插件,带省略的Vue分页插件
  分页
 14686  45

超实用精简的分页插件

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

官网分页特效

官网分页特效
  分页
 14907  83

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

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

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

    - 她说年少轻狂 ~ 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
        建议添加总记录数的显示
    回复
    一个人, 0
    2018/3/30 15:58:02
    怎么获取当前页是第几页啊
        酷酷的小k0
        2018/3/30 15:59:15
        请看说明
        一个人,0
        2018/3/30 16:09:10
        下一页的点击事件是什么
        酷酷的小k0
        2018/3/30 16:47:28
        写好了,不用关心点击事件
    回复
    1076222907bobo 0
    2018/3/21 9:55:31
    还不错啦 很好用 回复
    一晨_?光 0
    2018/3/15 9:20:42
    为什么我的样式表css文件引入都出问题
        酷酷的小k0
        2018/3/15 9:25:11
        是你路径不对吧
    回复
    劍仞雪の傑 0
    2018/2/23 17:19:42

    我一个页面有三个导航!用三个分页!怎么初始化

    $(".submenu ul li").on('click', function() {
        $(".submenu ul li").removeclass('active');
        $(this).addclass('active')
        var index = $(this).index();
        types = $(this).attr('type');
        if (types == '9') {
            getifos.getmenuajax(pagesize);
            getifos.pageajaxsum()
        } else if (types == 'd') {
            getifos.getmenuajax(pagesize);
            getifos.pageajaxsum()
            $("#page").html("");
            $("#page").html("<div class='m-pagination'></div>");
        }
        $(".content .tab1").eq(index).removeclass('dis_none').siblings().addclass('dis_none')
    })

    我这样写怎么只能出来一个分页!第二个导航里面内容怎么没有分页了

    回复
    莫水寒 0
    2018/2/4 15:51:02

    页面初始化时报这个错Cannot read property pageText of undefined是什么问题。

        酷酷的小k0
        2018/2/5 11:05:35

        初始化顺序错了

    回复
    科大伟 0
    2018/1/26 16:42:47

    求微信私聊

        科大伟0
        2018/1/26 16:53:33

        我遇到的问题是这样的,页面加载完成之后,我初始化了插件

        function initPager(totalPage,showPageNum){
              console.log("totalPage:"+totalPage+"........."+"showPageNum:"+showPageNum);
        	$("#pagination").whjPaging({
        		pageSizeOpt: [
        	              {'value': 5, 'text': '5条/页'},
        	              {'value': 10, 'text': '10条/页'},
        	              {'value': 15, 'text': '15条/页', 'selected': true},
        	              {'value': 20, 'text': '20条/页'}
        	         ],
        		    css: 'css-2',
        		    totalPage: totalPage,	
        		    showPageNum: showPageNum,
        		    firstPage: '首页',
        		    previousPage: '上一页',
        		    nextPage: '下一页',
        		    lastPage: '尾页',
        		    isShowFL: true,
        		    isShowPageSizeOpt: false,
        		    isShowSkip: false,
        		    isShowRefresh: false,
        		    isShowTotalPage: false,
        		    isResetPage: true,		    
                            callBack: function (currPage, pageSize) {
        		    	$("#pagination").whjPaging("setPage", currPage, totalPage);
        		    	getAbility(currPage,15);
        		    }
        		});	
        	}

        但是当我点击了一个按钮需要重新初始化时没有反应,请问需要怎么解决?

        科大伟0
        2018/1/26 17:08:51

        知道怎么做了

        科大伟0
        2018/1/26 17:27:17

        还是不行啊

        酷酷的小k0
        2018/1/26 17:50:00

        楼下有评论有例子

    回复
    科大伟 0
    2018/1/26 14:34:16

    能通过方法设置showPageNum吗?

        酷酷的小k0
        2018/1/26 14:37:22

        不能,只能在初始化设置,而且也不提供,一开始显示多少就显示多少

    回复
取消回复