ajax异步分页

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_33768099/article/details/64923599

 因为一个项目需要实现分页,但是不兼容分页插件所以自己写了一个简单的分页,分享一下,仅供参考

后台框架Spring MVC

数据格式JSON

请求方式AJAX

数据更新方式 append

以下是js代码

var pageNum=1;//当前页数
var pageCount=1;//总页数

function paging(obj){//传过来的obj中包含页码信息  这个是后台封装用来查数据库的
	$("#pagediv").empty();//删除全部的内容
	$("#pagediv").append("<li onclick=\"pageClick('a');\">上一页</li>");//插入上一页
	var arri=createArr(obj);//此方法可以根据当前页数生成前后页
		for(var i=1;i<=arri.length;i++){//生成可点击的页码
			if(arri[i-1]==pageNum){
				$("#pagediv").append("<li style=\"background-color:#ccc;\" onclick=\"pageClick("+arri[i-1]+");\">"+arri[i-1]+"</li>");
			}else $("#pagediv").append("<li onclick=\"pageClick("+arri[i-1]+");\">"+arri[i-1]+"</li>");
		}
		$("#pagediv").append("<li onclick=\"pageClick('z');\">下一页</li>");//下一页
}

function createArr(obj){
		pageNum=obj.pageNum;//给变量
		pageCount=obj.pageCount;
		var c=pageNum;
		var arr=new Array();
		if(pageCount>=5){//默认显示5个页码
			if(c>3 & c<pageCount-2){//判断当前页高于3页
				arr = [c-2,c-1,c,c+1,c+2];
			}else if(c<=3){//低于3页统一用12345
				arr = [1,2,3,4,5];
			}else if(c>=pageCount-2){//最后一页的时候不在增加页数
				arr = [pageCount-4,pageCount-3,pageCount-2,pageCount-1,pageCount];
			}
		}else{//少于5个就显示当前页数
			for(var i=1;i<=pageCount;i++){
				arr[i-1]=i;
			}
		}
		return arr;
	}
	
	function pageClick(Num){//a表示上一页 z表示下一页 否则使用指定页
		if(Num=="a"){
			if(pageNum>1){
				pageNum=pageNum-1;
			}
		}else if(Num=="z"){
			if(pageNum<pageCount){
				pageNum=pageNum+1;
			}
		}else pageNum=Num;
		query(pageNum)
	}

以下是jsp的分页代码

<!--分页导航 开始-->
        <div class="text-center div_page" id="div_page">
            <ul id="pagediv" class="ul_page">
            </ul>
        </div>
<!--分页导航 结束-->

下面是效果图 模拟数据有7页

如果当前页低于3页

点击下一页

点击第4页 这时候所有的页码都发生了变化 

createArr 自动生成的

一直下一页到最后一页

首先跳转到指定页是没啥难度的 直接往后台传页数就可以,上一页下一页就需要去用当前的页数+1或者-1

动态生成页码需要一个中间值 如我这里使用的3   3-2 3-1 3 3+1 3+2 就是12345的页码,所以只需要取到3就可以了,然后再做一下低于3和最后两页的处理就ok了