UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

jQuery分页插件PageNav(原创)

所属分类：导航-分页

 42029  331  查看评论 (32)
分享到微信朋友圈
X
jQuery分页插件PageNav(原创) ie兼容8
 查看演示  立即下载

更新时间：2018/3/18 上午12:12:43

更新说明：增加了对pageCount和currentPage的整数型转换，防止传入字符串时产生的BUG。

使用方法

发布时间：2018-2-20 23:19

一 : pagenav.css jquery pagenav.js 将上述3个文件依次引入

二 : 复制nav的html至你的页面中，并给与id，这个将作为生成分页条的盒子。 根据需要可以在nav中添加/删除 dark 类名来搭配浅色/深色背景。

<nav arialabel="page navigation" class="pagenavouter" id="pagenavid"></nav>

三 : 生成翻页导航:

var pageNavObj = null; //用于储存分页对象
pageNavObj = new PageNavCreate("PageNavId", {
    pageCount: 30,
    currentPage: 1,
    perPageNum: 5,
});
pageNavObj.afterClick(pageNavCallBack);
/*
PageNavId://盒子的id名
pageCount://总页数
currentPage://当前页
perPageNum://每页按钮数(非必须,默认5)
pageNavObj.afterClick()
*/

在这个方法内传入你的回调函数，这个回调函数会在翻页按钮被点击后执行，回调函数的参数中将会传入当前点击的页码值，pageNavCallBack函数的名称和内容根据需要自定;

一般在回调函数中执行AJAX异步请求，然后根据返回的数据，重复步骤三重新生成一个分页条。

例：

//翻页按钮点击后触发的回调函数       
function pagenavcallback(clickpage) {
    //clickpage是被点击的目标页码          
    //一般来说可以在这里通过clickpage,执行ajax请求取数来重写页面          
    //根据新的数据重新生成            
    pagenavobj = new pagenavcreate("pagenavid", {
        page: 30, //总页数               
        currentpage: clickpage, //当前页              
        perpagenum: 5, //每页按钮数         
    });
    pagenavobj.afterclick(pagenavcallback); ///最后还要再次绑定点击事件后的回调函数  
}

欢迎留言反馈，有时间进一步完善。

相关插件-分页
查看更多

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

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

jQuery table分页插件

 一款简单快速的前后端分页双套代码
  分页
 67881  465

jQuery分页插件

 根据获取内容显示不同页数并可输入页码跳转
  分页
 56900  528

自制实用主义分页插件

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

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

    李先生的⑨ 0
    2019/8/21 11:50:10
    怎么把跳转页面的html删除
        OceanZH0
        2019/8/21 14:20:34
        能说详细些吗？哪个跳转页面的html？
    回复
    优子★大神 0
    2018/11/13 16:08:43
    实际使用起来不太方便，首先既然引用了jquery，就应该用jquery插件写法。而且你的插件太依赖id，如果一个页面要多个分页插件的话，就不方便了。而且你的事件绑定机制也是很别扭。
        OceanZH0
        2018/11/13 23:26:08
        谢谢反馈，是没有用jQuery插件写法来写，插件规范是个问题，以后有时间再改进了。
        如果一个页面要多个分页条的话，分别给与id然后new一个新的实例就好了，不依赖id怎么标识呢？
        事件绑定是比较简单直接的都通过类名绑上了，然后触发时调用用户的回调函数，若是有更好的建议可以详细说说。
        优子★大神0
        2018/11/14 15:30:32
        我的意思是,如果使用jquery的插件写法,就不用依赖id啦,因为jquery的选择器自动就能吧dom列表传到插件内部.反之如果完全依赖id,一旦动态生成分页条,就会很麻烦,因为id是唯一的,相比之下,class就可以复用啊.事件绑定我的建议是直接放到初始配置里面.这两个问题改善了,楼主的插件还是很有用的.当然我也是最强王者,楼主不要介意哈
    回复
    久踹的背影 0
    2018/9/12 10:02:42
    你好 我想把总页数改为50 但是 并没有成功
        OceanZH0
        2018/9/12 19:17:16
        新建分页条的时候，pageCount: 50,
    回复
    逆光飞羽 0
    2018/9/7 14:44:13
    提示一下，IE8下需要把nav标签改为div。IE8不支持<nav>，会报错，至少我这边改成div以后IE8就没报错了。别忘了css里面的。 回复
    羊 0
    2018/9/3 12:03:18
    这个兼容IE8 吗？
        OceanZH0
        2018/9/3 15:16:54
        我没有原生的IE8，在IE11里用IE8仿真模式是可以用的。

        不过要记得把jquery版本换成低版本，2.0(含)以上的jquery不支持IE8
    回复
    sunshine 0
    2018/7/17 14:31:47
    非常好，功能强大，代码不多才200多行，已经用在自己的网页上了。谢谢作者
        OceanZH0
        2018/7/17 23:25:19
        谢谢使用~
        我的源码是未压缩的，若是需要可以压缩来节省出更多体积
    回复
    有时间睡一觉 0
    2018/7/4 13:35:36
    你好 请问你这个设置当前页的方法是什么呢
        OceanZH1
        2018/7/4 18:53:36

        请看 三 : 生成翻页导航，例子中的注释,
        currentPage参数就是当前页

        sunshine0
        2018/7/17 14:34:08
        function PageNavCreate(id,props){
   if(id&&props){
       this.id=id;
       this.pageCount = parseInt(props.pageCount),//总页数
       this.currentPage = parseInt(props.currentPage),//当前页码
       this.perPageNum = props.perPageNum || 5,
       this.perPageNum = (this.perPageNum<3 ? 3 : this.perPageNum);// 每页按钮数量最小值不能小于3
       this.target = document.getElementById(id);
       this.clickPage = null;
       this.halfPerPage = 3;
    回复
    阿福家的小罗i 0
    2018/5/17 23:56:16
    您的例处是否函数名有一些问题呢
        OceanZH0
        2018/5/18 9:31:52
        问题能具体说下吗？
    回复
    走进你的全世界 3
    2018/5/1 21:04:01

    你好，我读了你的代码，写的很好，很厉害，我稍微修改了下你的代码，我没有手动再去绑定，因为我觉得这样做不太好。我的修改思路是：在ajax取到数据后无需再手动重新绑定，取而代之的是，去调用你那个第一次绑定的方法（我把第一次绑定封装了一个方法），并且把第一次绑定的“当前页的参数设置为了变量“，你那个是1。
    我的代码如下：
    loadPaging:function(count,_pageNo){//分页函数，第一个count是总的数据条数，第二个参数是当前页（也就是用户点击分页下面的第几页）

    var pageNum = Math.ceil(count / 10); //计算总页数
$("#count").html(count);
$("#countPage").html(pageNum <= 0 ? 1 : pageNum);
//下面开始分页
this.pageNavObj = new PageNavCreate("PageNavId", {
    pageCount: pageNum, //总页数
    currentPage: _pageNo, //当前页
    perPageNum: 5, //每页按钮数
});
this.pageNavObj.afterClick(this.sendQuery);
}

    下面的代码在ajax中写，也就是调用上面的分页函数：

    loadPaging(count,_pageNo);//分页

    *****这样的好处是，当每发送一次ajax时，就会去调用一次loadPagin方法，不用再手动去绑定了

        走进你的全世界0
        2018/5/1 21:06:35
        js函数的定义是：function loadPaging（）,大家还是这样写，我那个写法是Vuejs的写法，请不要感觉奇怪。另外，在loadPaging方法中，相当于每次发送ajax请求都会重新设置总条数和总总页数，是有一点不太好，不过没什么大问题
        OceanZH0
        2018/5/2 11:35:11
        感谢反馈，大概明白你的意思，你主要是想把生成分页条对象的两段代码封装成一个函数，然后在AJAX里面调用，这样方便一些。

        后面在AJAX里面这样调用函数loadPaging(count,_pageNo)，这样子函数里的this应该就指向window了，以及this.sendQuery应该是你自定义的全局的回调函数？

        每个人根据自己的具体需求来做修改和封装没什么问题的，不过每个人的命名还有配置项都不一样，如果有和你一样的想法的人应该需要根据自己的情况来自行封装了。
    回复
    叹久 0
    2018/4/15 21:27:58
    为什么用了以后整个页面陷入了死循环，不停的在加载
        OceanZH0
        2018/4/15 22:13:13
        插件里没有计时器，如果你有不停加载的循环需要检查一下你自己的计时器代码是否有问题。

        可以参考一下Demo，里面的插件是正常运行的。
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复