这段时间在做公司项目的时候需要用到ajax进行分页（点击页码也是无刷新的显示上一页或下一页的内容，不是一般的选择跳转），但是在网上找了一下，大部分分页插件都是直接刷新跳转的，感觉和我的需求差距比较大，就自己动手写了一个可以实现自己需要的功能的js来实现这个控件，实现的效果如下：
因为业务需要，我需要在一个页面创建多个这样的页码控件（有些是在ajax中生成的），显然为每一个控件写一个专属的js是不现实的，所以，我将公共部分提取出来，然后通过传入的选择器不同，对不同的控件进行相应方法的调用。
下面是该控件实现的js代码：
// JavaScript Document $(function(){ //点击分页按钮触发 $("#pageGro li").live("click",function(){ var pageNum = parseInt($(this).html());//获取当前页数 //获取当前评价分类的总页数 var totalnum = type+""+praise; if(pageCount[parseInt(totalnum)] > 5){ pageGroup(pageNum,pageCount[parseInt(totalnum)]); }else{ $(this).addClass("on"); $(this).siblings("li").removeClass("on"); } loadData(pageNum);//这个方法里面就是ajax获取数据的代码，为了让这个页码控件能够更通用，我将这个方法写在调用这个js的php页面中，这样使得这个页码控件能应用于更多的场景中。 }); //点击上一页触发 $("#pageGro .pageUp").live("click",function(){ var totalnum = type+""+praise; console.log(totalnum); console.log(pageCount); if(pageCount[parseInt(totalnum)] > 5){//初始默认显示1-5页（若真实页码小于五，则根据真实页码数显示） var pageNum = parseInt($(this).children("li.on").html());//获取当前页 pageUp(pageNum,pageCount[parseInt(totalnum)]); loadData(pageNum); }else{ var index = $("#pageGro ul li.on").index();//获取当前页 console.log("index = "+index); if(index > 0){ $(this).next().find("li").removeClass("on");//清除所有选中 $(this).next().find("ul li").eq(index-1).addClass("on");//选中上一页 loadData(index); } } }); //点击下一页触发 $("#pageGro .pageDown").live("click",function(){ var totalnum = type+""+praise; console.log(totalnum); console.log(pageCount[parseInt(totalnum)]); if(pageCount[parseInt(totalnum)] > 5){ var pageNum = parseInt($(this).children("li.on").html());//获取当前页 pageDown(pageNum,pageCount[parseInt(totalnum)]); loadData(pageNum); }else{ var index = $(this).children("ul li.on").index()+1;//获取当前页 console.log(index); if(index+1 < pageCount[parseInt(totalnum)]){ $(this).prev().find("li").removeClass("on");//清除所有选中 $(this).prev().find("ul li").eq(index+1).addClass("on");//选中下一页 loadData(index+2); } } }); }); //点击跳转页面 function pageGroup(pageNum,pageCount){ switch(pageNum){ case 1: page_icon(1,5,0); break; case 2: page_icon(1,5,1); break; case pageCount-1: page_icon(pageCount-4,pageCount,3); break; case pageCount: page_icon(pageCount-4,pageCount,4); break; default: page_icon(pageNum-2,pageNum+2,2); break; } } //根据当前选中页生成页面点击按钮 function page_icon(page,count,eq,element){ var $this = element; var ul_html = ""; for(var i=page; i<=count; i++){ ul_html += "<li>"+i+"</li>"; } $this.children("ul").html(ul_html); console.log($this.children("ul li:eq("+eq+")")); $this.find("ul li:eq("+eq+")").addClass("on"); } //上一页 function pageUp(pageNum,pageCount){ switch(pageNum){ case 1: break; case 2: page_icon(1,5,0); break; case pageCount-1: page_icon(pageCount-4,pageCount,2); break; case pageCount: page_icon(pageCount-4,pageCount,3); break; default: page_icon(pageNum-2,pageNum+2,1); break; } } //下一页 function pageDown(pageNum,pageCount){ switch(pageNum){ case 1: page_icon(1,5,1); break; case 2: page_icon(1,5,2); break; case pageCount-1: page_icon(pageCount-4,pageCount,4); break; case pageCount: break; default: page_icon(pageNum-2,pageNum+2,3); break; } } //生成分页按钮 function createBtn(pageCount, element){ if(pageCount>5){ page_icon(1,5,0,element); }else{ page_icon(1,pageCount,0,element); } }
页面上该页码控件按钮的代码
<div> <div>上一页</div> <div> <ul> <!--页码显示区 --> </ul> </div> <div>下一页</div> </div>
页面上写的用于被该页码控件调用实现无刷新加载数据的ajax方法
//ajax获取点击分页按钮应该加载的数据 function loadData(pageNum){ console.log("type = "+type +", praise = " + praise); var beChangeElement = ''; switch(type){ case 0: beChangeElement += "#togivineva ";break; default:; case 1: beChangeElement += "#givineva ";break; } switch(praise){ default:; case 0:beChangeElement += ".praiseAll";break; case 1:beChangeElement += ".praiseBad";break; case 2:beChangeElement += ".praiseNormal";break; case 3:beChangeElement += ".praiseGood";break; } $.ajax({ type:"Get", url:你要请求的url地址, data:{page:pageNum}, dataType:'json', success:function(data){ var info = data.info; if(info.length > 0){//判断ajax回来的数据是否为空 var s = ''; beChangeElement = $(beChangeElement); console.log(beChangeElement); beChangeElement.children("div.detail-content").remove(); $.each(info, function(index,v){ s="你ajax出来要填补到页面上的数据"; beChangeElement.children("#pageGro").before(s);//表示将s中的内容填充到相应页码控件前面 }); }else{ var t = "<p>暂时还没有内容哦！</p>"; beChangeElement.html(t); } }, }); }
到此，该页码控件的使用就完成了。
在其中需要注意的内容如下：