自己写出个ajax的分页插件

前端之家收集整理的这篇文章主要介绍了自己写出个ajax的分页插件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

思路:1 先计算出分页页码 。返回分页页码数组。也就是 如图
2.然后循环变量页码数组 拼接成html元素 并 绑定上事件

/*初始化分页 container容器传jquery对象 pageNow当前第几页   pageSize每页数量   count总数*/
	function initPage(container,pageNow,pageSize,count){
		container.empty();
		var totalPage=0;
		if(count%pageSize>0){
			totalPage=parseInt((count/pageSize)+1);
		}else{
			totalPage=parseInt(count/pageSize);
		}
		var pageSpanArray=makePageNos(pageNow,count,totalPage);
		$.each(pageSpanArray,function(index,currData){
				if(currData == pageNow){
					pageSpan=$("<strong></strong>");
					pageSpan.text(pageNow);
					container.append(pageSpan);
					return;
				}
				if(currData=="..."){
					pageSpan=$("<span></span>");
					pageSpan.text(currData);
					container.append(pageSpan);
					return;
				}
				pageSpan=$("<a></a>");
				pageSpan.text(currData);
				pageSpan.on("click",function(e){
					e.preventDefault();
					goPage(currData);
				});
				container.append(pageSpan);
				
		});	
		if(pageNow==1){
			initFanye(pageNow,container,"pre",false);
			initFanye(pageNow,"next",true);
		}
		else if(pageNow==totalPage){
			initFanye(pageNow,true);
			initFanye(pageNow,false);
		}
		else if (pageNow>1||pageNow<totalPage){
			initFanye(pageNow,true);
		}
		
	}
	
	function initFanye(pageNow,type,disable){
		var html="";
		if(type =="pre"&&disable){
			html="<a>上一页</a>";
		}else if(type =="next"&&disable){
			html="<a>下一页</a>";
		}else if(type =="pre"&&!disable){
			html="<span>上一页</span>";
		}else if(type =="next"&&!disable){
			html="<span>下一页</span>";
		}
		pageSpan=$(html);
		if(disable){
			pageSpan.on("click",function(e){
				e.preventDefault();
				var goPageNo=1;
				if(type =="pre"){
					goPageNo=pageNow-1;
				}else if(type =="next"){
					goPageNo=pageNow+1;
				}
				goPage(goPageNo);
			});
		}
		container.append(pageSpan);
	}
	
	/*计算分页页码 pageNow当前第几页   pageSize每页数量   count总数 totalPage总页数    最后返回分页 页面*/
	function makePageNos(pageNow,totalPage){
		
		
		var pageSpanLength=0;
		if(totalPage>6){
			if(pageNow<=3||pageNow>=totalPage-2){
				pageSpanLength=7;
			}else if(pageNow == 4||pageNow == totalPage-3){
				pageSpanLength=8;
			}else{
				pageSpanLength=9;
			}
		}else{
			pageSpanLength=totalPage;
		}
		var pageSpanArray=new Array(pageSpanLength)
		if(totalPage<7){
			for( i=0;i<pageSpanLength;i++){
				pageSpanArray[i]=i+1;
			}
			return pageSpanArray;
		}
	//	container.empty();
		
		for( i=0;i<pageSpanLength;i++){
			if(i==0){
				pageSpanArray[i]="1"
				continue;
			}
			if(i==pageSpanLength-1){
				pageSpanArray[i]=totalPage;
				continue;
			}
			if((pageSpanLength==9)&&(i==pageSpanLength-2||i==1)){
				pageSpanArray[i]="...";
				continue;
			}
			if((pageNow<=4&&i==pageSpanLength-2)||(pageNow>=totalPage-3&&i==1)){
				pageSpanArray[i]="...";
				continue;
			}
			if(pageNow<=4){
				pageSpanArray[i]=(i+1);
				continue;
			}
			if(pageNow>=totalPage-3){
				pageSpanArray[i]=(totalPage-pageSpanLength+i+1);
				continue;
			}
			
			if(i<parseInt(pageSpanLength/2))
				pageSpanArray[i]=(pageNow-(parseInt(pageSpanLength/2)-i));
			else
				pageSpanArray[i]=(pageNow+(i-parseInt(pageSpanLength/2)));
			
			
			}
			return pageSpanArray;
	}

猜你在找的Ajax相关文章