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的事情了

* 下一页
*/
$("#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));
}
});
}
});

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

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

巴特西

Java丨springMVC + Ajax 来进行分页

最新文章

热门文章