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));
}
});
}
});
备注：以上由于时间关系，内容不完善，所以设置了密码，还请见谅！
=======祝各位读者生活愉快======
