当前位置 博文首页 > 程序员石磊:自己写出个ajax的分页插件

    程序员石磊:自己写出个ajax的分页插件

    作者:[db:作者] 时间:2021-08-08 19:24

    思路: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;
    	}

    cs