jQuery分页插件

所属分类:导航-分页

 73806  394  查看评论 (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');
    },
});
相关插件-分页

实用美观的jquery 分页

代码简单,运行速度快,兼容所有浏览器
  分页
 41108  453

jQuery仿淘宝分页插件(原创)

根据淘宝分页样式简洁美观功能全面兼容性好易用性好维护简单多个分页互不干扰的分页插件
  分页
 36022  352

刷新页面不变的分页插件

jQuery刷新页面页面不会改变的分页插件
  分页
 37529  321

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

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

讨论这个项目(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里访问吗?你这无非是告诉我们你的页数定义在哪儿 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复