jQuery分页插件PageNav(原创)

所属分类:导航-分页

 11132  24  查看评论 (17)
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); ///最后还要再次绑定点击事件后的回调函数  
}

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

相关插件-分页

官网分页特效

官网分页特效
  分页
 15425  83

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

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

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

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

jQuery长文本分页插件textify

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

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

    阿福家的小罗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,里面的插件是正常运行的。
    回复
    等待,梦里花开 0
    2018/4/12 17:26:45
    请问一下这个怎么和数据联系在一起啊
        OceanZH0
        2018/4/12 22:59:51
        什么数据?
        春和景明0
        2018/4/14 17:56:16
        回台数据怎么调用链接
    回复
    场以散,旧人亦相离 0
    2018/4/3 21:03:04
    您好,方便加一下qq吗?有几个问题想请教一下。2945231742 谢谢 回复
    汐染季沫h 0
    2018/3/30 11:30:45
    你好 这个插件怎么对应页码往后天传值
        OceanZH1
        2018/3/30 19:37:12

        你是说后台传值?
        说明里有说,在这个方法里传入你的回调函数,

        pageNavObj.afterClick(你的函数)

        这个方法中,你的函数的第一个参数就会被传入点击的页码,你可以在你的函数中通过AJAX把这个页码传给后台。
        说明里有回调函数示例,或者你也可以把插件下载下来打开查看。

        汐染季沫h0
        2018/4/16 8:52:17
        好的 谢谢
    回复
    王八蛋 0
    2018/3/17 16:14:26
    可以留个qq吗
        OceanZH0
        2018/3/17 16:22:20
        遇到了什么问题吗?
        王八蛋0
        2018/3/17 16:24:22
        是遇到个问题,想咨询您一下,方便的话加我q983469079;谢谢
    回复
取消回复