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