Java丨springMVC + Ajax 来进行分页

javaweb 分页技术 实现的方式有很多种,但是小编在网上问了度娘也问了谷老师,得到的答案让小编我不是很满意,so,还是自己写吧!

在小编的博文中,小编不会上传源码,只会把重要的代码和思路供大家参考!

如果只想要实现代码的读者们就不要继续观看此文章。

主题:Javaweb分页技术实现详解

1、首先我们来解析一下分页实现需要的一些变量有哪些:

upPage:上一页

nextPage:下一页

nowPage:当前的页数

sumPage:总页数

list:需要显示的数据

count:显示的条数

2、在上面我们知道了需要一些什么参数,那么我们怎么获得这些参数呢?

1)我们首先从后台加载一次要显示的数据到页面上

request.setAttribute("list", list);//需要显示在界面的数据

request.setAttribute("count", list.size());//在界面上显示的当前页条数

request.setAttribute("nowPage", nowPage);//现在是多少页

request.setAttribute("sumPage", sumPage);//总页数多少页

 

2)把第一条中对应的参数在后台传到view层  ,显示如下格式:

|  姓名  |  年龄  |  班级  |

|  张山  |  19    |  3班   |

|  李四  |  20    |  1班   |

|  王麻子   |  18    |  5班   |

----3条------------上一页--1/20--下一页--

参数对应如下:

3条:${count}

1:${nowPage}

20:${sumPage}

以上就是我们在分页之前做的准备工作,接下来就是ajax的事情了

3.设置上一页下一页的点击事件:

/*

* 下一页
*/
$("#nextPage").click(function(){
  //alert("----");
  //判断是否不是最后一页
if($("#pageNum").html().indexOf($("#sumPage").html())!=-1){
alert("已经是最后一页了");
return;
} else {//不为最后一页就查找下一页的内容
$.post("next.duanniu",
{
page:""+$("#pageNum").html(),
sumPage:""+$("#sumPage").html()
},
function(data,status){//返回状态
$("#att").empty();//设置tbody的内容为空
if(status=="success"){
var jsonData = JSON.parse(data);
var jsonStr = "";
var record = 0;
$.each(jsonData, function(i, item){
jsonStr+="<tr >"+
"<td width='150px'>"+item.id+"</td>"+
"<td>"+item.name +"</td>"+
"<td>"+item.area +"</td>"+
"<td>"+item.empower +"</td>"+
"<td>"+item.belong +"</td>"+
"<td><span class='state'>"+item.state +"</span></td>"+
"<td>"+
"<div class='operation'>"+
"<a class='edit' href='cardAdminTableShow.duanniu?id="+item.id+"'>"+
" <span class='btn-edit'></span>直推查看"+
"</a>"+
" <a class='edit' href='cardAdminTree.duanniu?id="+item.id+"'>"+
" <span class='btn-edit'></span>树状图"+
" </a>"+
" </div>"+
"</td>"+
"</tr>";
record = i+1;
});
$("#att").empty().append(jsonStr);
$("#recordCount").html("共"+record+"条");
//设置页数
$("#pageNum").html(""+(parseInt($("#pageNum").html())+1));
}
});
}
});

/*
* 上一页
*/
$("#upPage").click(function(){
//判断是否不是最后一页
if(parseInt($("#pageNum").html())-1==0){
alert("已经是第一页了");
return;
} else {//不为最后一页就查找下一页的内容
$.post("next.duanniu",
{
page:""+parseInt($("#pageNum").html())-2,
sumPage:""+$("#sumPage").html()
},
function(data,status){//返回状态
$("#att").empty();//设置tbody的内容为空
if(status=="success"){
var jsonData = JSON.parse(data);
var jsonStr = "";
var record = 0;
$.each(jsonData, function(i, item){
//alert("--"+jsonData);
jsonStr+="<tr >"+
"<td width='150px'>"+item.id+"</td>"+
"<td>"+item.name +"</td>"+
"<td>"+item.area +"</td>"+
"<td>"+item.empower +"</td>"+
"<td>"+item.belong +"</td>"+
"<td><span class='state'>"+item.state +"</span></td>"+
"<td>"+
"<div class='operation'>"+
"<a class='edit' href='cardAdminTableShow.duanniu?id="+item.id+"'>"+
" <span class='btn-edit'></span>直推查看"+
"</a>"+
" <a class='edit' href='cardAdminTree.duanniu?id="+item.id+"'>"+
" <span class='btn-edit'></span>树状图"+
" </a>"+
" </div>"+
"</td>"+
"</tr>";
record = i+1;
});
$("#att").empty().append(jsonStr);
$("#recordCount").html("共"+record+"条");
//设置页数
$("#pageNum").html(""+(parseInt($("#pageNum").html())-1));
}
});
}
});

 

备注:以上由于时间关系,内容不完善,所以设置了密码,还请见谅!

=======祝各位读者生活愉快======

 

原文地址:https://www.cnblogs.com/haojieli/p/5572204.html