用js封装一个分页插件，很好用，支持异步加载数据（上一页、下一页、首页、尾页）

清疚 2021-07-25 00:46 364阅读 0赞

### 自己写了一个分页，觉得蛮好用，放上来大家看看 ###

![20210111192512131.gif][]

### 代码里面已经有比较详细的注释，就不解释了 ###

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=GBK">
            <style>
            *{
            	margin:0;padding:0;
            }
    		 .table{
    			line-height: 22px;
    			width:80%;
    		    font-size: 13px;
    			word-break:break-all;
    			cursor: default;
    			BORDER: #FFFFFF 1px solid;
    			background-color:#FFFFFF;
    			border-collapse:collapse ;
    			border-Color:#B9B9B9;	
    			margin: 0 auto;
    			margin-top:10px;
    		}
    		.pageDiv{
    		    position: absolute;
        		left: 10%;
        		width:600px;
    		}
            </style>
            </head>
            <body>
            	<table border=1  class='table' >
            		<tbody id="tbody"></tbody>
    	       	</table>
           		<div id='pageDiv' class='pageDiv'></div>
            </body>
            
    <script>
    		
    	 function Page(o,callback){
        	o=o||{};
        	var el = o.el;
        	//初始化数据
        	this.pageNum=o.pageNum||0,this.pageSize=o.pageSize||10,this.totalCount=o.totalCount||0;
        	this.callback=callback||function(){};
        	//生成分页的html
        	var html="<div>";
    		   html+=' <table width="90%" border="0"  algin=center style="margin-top:3px;font-size: 13px;">';
    				html+='<tr algin=center>';
    					html+='<td algin=center><div style="margin-left: 12px;">';
    							html+='<button id="firstPage" disabled style="letter-spacing: 3px;">首页</button> ';
    							html+='<button id="previous" disabled style="letter-spacing: 3px;">上一页</button> ';
    							html+='<button id="next"  disabled style="letter-spacing: 3px;">下一页</button> ';
    							html+='<button id="last"  disabled style="letter-spacing: 3px;">尾页</button> ';
    							html+='第<span id=customPageNumSpan> '+this.pageNum+'</span> 页/共计 <span id=customTotalPageSpan>0</span> 页,每页显示 '+this.pageSize+' 条,总共 </span><span id=customTotalCountSpan>0</span> 条记录';
    						html+='</div>';
    					html+='</td>';
    				html+='</tr>';
    			html+='</table>';
    		
    		if(el && el.tagName && el.tagName.toLowerCase()=='div'){
    			el.innerHTML=html;
    			//给几个按钮增加点击事件
    			this.firstPage = document.getElementById("firstPage");
    			this.firstPage.addEventListener('click',firstQuery.bind(this)); 
    			
    			this.previous = document.getElementById("previous");
    			this.previous.addEventListener('click',previousQuery.bind(this))
    			
    			this.next = document.getElementById("next");
    			this.next.addEventListener('click',nextQuery.bind(this))
    			
    			this.last = document.getElementById("last");
    			this.last.addEventListener('click',lastQuery.bind(this));
    			
    			this.customTotalCountSpan=document.getElementById('customTotalCountSpan');
    			this.customPageNumSpan=document.getElementById('customPageNumSpan');
    			this.customTotalPageSpan=document.getElementById('customTotalPageSpan');
    		}else{
    		  throw	new Error("传入的对象必须是div！");
    		}
    		//几个点击按钮函数
    		function firstQuery(){//首页
    			this.pageNum=1;
    			this.query(1);
    		}
    		function previousQuery(){//上一页
    			this.pageNum--;
    			this.query(1);
    		}
    		function nextQuery(){//下一页
    			this.pageNum++;
    			this.query(1);
    		}
    		function lastQuery(){//尾页
    			this.pageNum=this.totalPage;
    			this.query(1);
    		}
        }
        //通知更新
        Page.prototype.doUpdate=function(){
        	var total = Math.floor(this.totalCount/this.pageSize);
        	this.totalPage=this.totalCount%this.pageSize==0?total:total+1;
        	
        	if(this.pageNum>this.totalPage){//超过总页数
        		this.pageNum=this.totalPage;
        	}else if(this.pageNum<=0){//小于等于0
        		this.pageNum=1;
        	}
        	//设置上一页下一页等按钮是否可用
        	if(this.totalPage==1){//总共只有一页
        		//所有的按钮不可用
        		this.firstPage.disabled=true;
        		this.previous.disabled=true;
        		this.next.disabled=true;
        		this.last.disabled=true;
        	}else{
        		if(this.pageNum==1 && this.totalPage!=1){//当前第1页
    	    		this.firstPage.disabled=true;
    	    		this.previous.disabled=true;
    	    		this.next.disabled=false;
    	    		this.last.disabled=false;
    	    	}else if(this.pageNum==this.totalPage){//最后一页
    	    		this.firstPage.disabled=false;
    	    		this.previous.disabled=false;
    	    		this.next.disabled=true;
    	    		this.last.disabled=true;
    	    	}else{//其他页
    	    		this.firstPage.disabled=false;
    	    		this.previous.disabled=false;
    	    		this.next.disabled=false;
    	    		this.last.disabled=false;
    	    	}
        	}
        
        	//设置显示文字的几个span内容
        	this.customTotalCountSpan.innerText=this.totalCount;
        	this.customTotalPageSpan.innerText=this.totalPage;
        	this.customPageNumSpan.innerText=this.pageNum;
        }
        //查询函数
        Page.prototype.query=function(type){
        	if(!type){
        		//this.pageNum=1;
        	}
        	//调用传入的回单函数
        	this.callback(this);
        }
        //更新函数
        Page.prototype.update=function(totalCount){
        	this.totalCount=totalCount;
        	//处理按钮是否可用等
        	this.doUpdate();
        }
        
        	//配置对象
        	var pageObj={
    			el:document.getElementById("pageDiv"),//分页div dom对象
    			pageSize:10,//每页多少条
    			pageNum:1,//当前显示第几页
    			totalCount:totalCount//数据总数 这里可以不传，page.update(totalCount)再传就可以
    		}
    		//创建分页，第2个参数为分页时的回调函数
    		var page = new Page(pageObj,queryData);
    		function query(){
    			//调用插件的查询方法
    			page.query();
    		} 
    		
    
    		
    		
    		//
    		var tbody=document.getElementById('tbody');
    		
    		var totalCount=100;
    		//查数据的函数
    		function queryData(){
    			var html='';
    			//这里用写死的数据，异步的话自己修改一下就好
    			for(var i=0;i<10;i++){
    				html+='<tr>';
    				var text1='第'+page.pageNum+'页 第'+(i+1)+'行第1列';
    				var text2='第'+page.pageNum+'页 第'+(i+1)+'行第2列';
    				var text3='第'+page.pageNum+'页 第'+(i+1)+'行第3列';
    				html+="<td align='center'>"+text1+"</td>";
    				html+="<td align='center'>"+text2+"</td>";
    				html+="<td align='center'>"+text3+"</td>"
    				html+='</tr>';
    			}
    			
    			tbody.innerHTML=html;
    			
    			//如果是异步，在回调函数里面调用这个就行，分页会根据totalCount来做相应的处理
    			page.update(totalCount);
    			
    			/* 异步示例
    			var url='';
    			$.post(url,{r:Math.random()},pageNum:page.pageNum,pageSize:page.pageSize},function(data){
    				//通知分页发生了变更
    				page.update(data.totalCount);
    				
    				//处理数据
    				genData(data.list);	
    			});
    			*/
    		}
    		
    		//页面打开的时候默认查询
    		query();
    </script>
    </html>

[20210111192512131.gif]: /images/20210724/3fcd925d9f084c63bd0fff8ece22ef86.png