更新时间: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); ///最后还要再次绑定点击事件后的回调函数 }
欢迎留言反馈,有时间进一步完善。
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;
你好,我读了你的代码,写的很好,很厉害,我稍微修改了下你的代码,我没有手动再去绑定,因为我觉得这样做不太好。我的修改思路是:在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方法,不用再手动去绑定了