jQuery分页插件

所属分类:导航-分页

 67803  393  查看评论 (43)
分享到微信朋友圈
X
jQuery分页插件 ie兼容8

更新时间:2019-10-13 22:45:29

更新说明:上一次上传只是兴趣使然想分享一个插件,没想到这么多的朋友进行了下载,并且文件里有我忘记的缺陷,对这些造成困扰的朋友感到抱歉,这一次的更新就是把 没办法获取当前页的bug解决。

同时也感谢评论区认可我的朋友,我看见了,谢谢~

function currentPage(currentPage){ // 触发页码数位置: Page/js/jquery.z-pager.js 64行 console.log("当前页码数:" + currentPage); }

更新时间:2019/5/10 上午9:22:31

更新说明:修改了一下按钮的背景颜色


分页的参数可进行配置

$.fn.zPager.defaults = {
    totalData: 10, //数据总条数
    pageData: 5, //每页数据条数
    pageCount: 0, //总页数
    current: 1, //当前页码数
    pageStep: 8, //当前可见最多页码个数
    minPage: 5, //最小页码数,页码小于此数值则不显示上下分页按钮
    active: 'current', //当前页码样式
    prevBtn: 'pg-prev', //上一页按钮
    nextBtn: 'pg-next', //下一页按钮
    btnBool: true, //是否显示上一页下一页
    firstBtn: 'pg-first', //第一页按钮
    lastBtn: 'pg-last', //最后一页按钮
    btnShow: true, //是否显示第一页和最后一页按钮
    disabled: true, //按钮失效样式
    ajaxSetData: true, //是否使用ajax获取数据 此属性为真时需要url和htmlBox不为空
    url: '', //ajax路由
    htmlBox: '' //ajax数据写入容器
}

调用时和上方参数名对应即可

$("#pager").zPager({
    totalData: 50,
    htmlBox: $('#wraper'),
    btnShow: true,
    ajaxSetData: false,
    dataRender: function(data) {
        console.log(data + '---data-2');
    },
});
相关插件-分页

bootstrap paginat分页优化

增加显示当前页码、总页数,输入页码跳转,并且插件中的英文提示和注释都翻译成了中文
  分页
 42441  350

自制实用主义分页插件

自制实用主义分页插件,分享给需要使用或者学习的人
  分页
 42695  450

bootstrap4的jquery分页插件

bootstrap4的jquery分页插件,支持刷新不变页数
  分页
 38735  302

jQuery长文本分页插件textify

jQuery实现的长文本分页特效,textify是一个jQuery插件,可以自动创建一个有吸引力的和现代的你的内容布局,避免让用户不再枯燥的文本。
  分页
 32375  359

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

    nickxin 0
    2022/3/9 9:03:29
    增加搜索功能,可不可以对数据、分页重新渲染 回复
    轨迹 0
    2021/5/26 10:05:26
    有使用ajax请求数据的完整案列吗,怎么使用ajax请求数据渲染在页面呢
        Terminally0
        2023/11/13 13:45:32
        你的解决了?
    回复
    luoweiyou 0
    2020/12/15 17:43:01
    有没有能给我完整的demo 回复
    大龄蜀黍 0
    2020/11/11 15:13:35
    这个插件有个要命的bug,就是页面加载时就自动加载了 currentPage 方法,如果不采用ajax获取数据,而是跳转页面的话就会死循环。 回复
    ?Q 0
    2020/8/1 11:06:06
    插件在每次刷新都会调用获取当前页码,那如果点击下一页写成跳转,若而不是ajax请求,跳转到下一页还会调用一下获取当前页码,这样就会死循环
        ?Q1
        2020/8/1 11:42:51

        可以重写一下点击事件

        $(function() {
            $('.pager a').click(function() {
                console.log($(this).attr('disabled'))
                if ($(this).attr('disabled') == 'disabled') {
                    return false;
                }
                let url = window.location.href
                console.log(url)
                let cutPoint = url.lastIndexOf("/")
                console.log($(this).html())
                let nextUrl = url.substr(0, cutPoint) + "/" + $(this).attr('page-id')
                console.log(nextUrl)
                window.location.href = nextUrl
            })
        });
        大龄蜀黍0
        2020/11/11 15:15:36
        这样是解决了死循环问题,但是页面按钮始始终是第一页高亮。这个怎么解决一下
    回复
    西贝 0
    2020/7/16 11:42:34
    怎么传入总条数重新加载呢?有人解决了吗? 回复
    0
    2020/6/29 17:15:58
    想要使用两个分页的插件,怎么出发两个不同的currentPage事件请求参数呢
    回复
    wug_xiaosa 0
    2020/6/12 9:47:32
    function currentPage(currentPage) {
        /*
            触发页码数位置: Page/js/jquery.z-pager.js 64行
        */
        console.log("当前页码数:" + currentPage)
        if (!isloading) {
            showData(currentPage)
        }
    }
    
    complete: e => {
        isloading = false
    }
    回复
    梅花十 0
    2020/4/10 17:24:00
    作者大大 的插件写的很不错!! 就是我在使用的时候 ajax是自己写的 那么 我需要实现 重新渲染分页条 就需要重新写totalData 这些数据 如果使用$.zPage 这个来实现 就会一直遇到 一个问题 我的ajax是写currentPage()这个方法中 那么 我在调用$.zPage 重新渲染 渲染途中又会触发currentPage() 又会发ajax
    就死循环了 我的解决办法是 改了作者的源码 渲染 再搞一个自己的 也是就 把作者源码再复制一份。。。我的解决办法 有点low 不知道 有没有大神 又好一点的办法
        梅花十0
        2020/4/10 17:25:50
        qq 673171445 如果遇到同样问题的 不知道 怎么解决的 可以联系下
    回复
    孤心人 0
    2020/3/18 11:10:17
    你这获取页面仅仅是在一个方法里面调用一个显示出来的方法而已 能把页数像属性一样在另一个js里访问吗?你这无非是告诉我们你的页数定义在哪儿 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复