自己写出个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,pageSize,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,container,"next",true);
		}
		else if(pageNow==totalPage){
			initFanye(pageNow,container,"pre",true);
			initFanye(pageNow,container,"next",false);
		}
		else if (pageNow>1||pageNow<totalPage){
			initFanye(pageNow,container,"pre",true);
			initFanye(pageNow,container,"next",true);
		}
		
	}
	
	function initFanye(pageNow,container,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,pageSize,count,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;
	}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员石磊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值