ajax异步分页

来源：互联网发布：华为云计算认证培训编辑：程序博客网时间：2024/06/13 11:24

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

后台框架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页统一用12345arr = [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了

0 0