设计思路:
数据分页在写web项目时是很重要的一个应用,通常找到的一些比如jquery的一些插件通常是所谓的“假分页”,我们说的分页是要点击某一页时,向后台提交请求得到那一页的数据,而插件通常没有调用后台,只是将全部数据都拿到之后通过css配合js实现的数据分开显示,这种分页在加载时还是请求了全部的数据。
我的思路:首先要从数据库中得到你要显示的所有数据的条数,设计好你要每页显示多少条数据,根据这两项,就可以确定下来生成多少个页码的按钮,包括“上一页”、“下一页”,页面加载时要将第一页数据显示。至于怎么显示,显示每一页时,点击页码的时候得到要跳转的页码,调用生成第几页的函数,通过Ajax请求servlet,将需要显示的数据放到list当中以json的形式传回jsp页面,然后用js生成对应的表格即可。“上一页”的实现,定义一个js全局变量用来保存当前页码,然后显示的时候同样去调用js函数进而调用Ajax即可,“下一页”同理。
代码:
在代码当中,当时只为了试一下分页能不能成功,我没有调用数据库,建了一个TestA这样一个类来模拟数据,在servlet当中,建立一个list来保存TestA这个类的对象,比如我请求第一页,第一页数据有5个的话,我就在list中放入id为0-4的五个数据然后返回,一次类推,在实际有数据库时,返回的list就是从数据库中读出的数据,同样的道理。
需要的jar包,都时Java操作json的包,在我的网盘可以找得到
https://pan.baidu.com/s/1SmfFkp4LYjVb0HGVL7kr0A#list/path=%2F
TestA类
这个类用来模拟一个bean,之后在list当中存的就是它的一个对象,请求第一页,第一页数据有5个的话,我就在list中放入id为0-4的五个数据。
package cn.test;
public class TestA {
private int id;
private String name;
public TestA() {
super();
}
public TestA(int id, String name) {
super();
this.id = id;
this.name = name;
}
@Override
public String toString() {
return "TestA [id=" + id + ", name=" + name + "]";
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
servlet:
servlet当中主要是得到list,将list封装成json数组,然后返回。当然这里得到list也可以是通过调用Dao层的方法从数据库中获得,此处我没有调用数据库,用了一个for循环来模拟,循环变量的取值当然就与当前页和每页多少数据有关,至于怎么计算,应该是挺简单的。。。
package cn.test;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
/**
* Servlet implementation class JsonTest
*/
public class JsonTest extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public JsonTest() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String cpage = request.getParameter("currpage");
String limit = request.getParameter("limit");
System.out.println("-------"+cpage);
List<TestA> list = new ArrayList<TestA>();
for(int i = (Integer.parseInt(cpage)-1)*Integer.parseInt(limit);
i < (Integer.parseInt(cpage)-1)*Integer.parseInt(limit)+Integer.parseInt(limit); i++) {
TestA a = new TestA(i,"test"+i);
list.add(a);
}
JSONArray jarray = JSONArray.fromObject(list);
response.getWriter().write(jarray.toString());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
jsp:
在jsp中主要有两个函数,一个变量。
先说变量吧,我在js中定义了一个全局变量叫currentPage来记录当前是第几页,在后面的代码中,会经常看到这个变量。
createPage函数,有三个参数,第一个currPage是当前页,第二个limit是每页限制多少数据,第三个是总的数据条数。前两个数据都是要传递到servlet当中的,然后使用jquery 的方法解析json,把要生成的表格先放到一个html这个列表中,通过js的方法,可以将整个表格添加到一个div中。
createbutton函数是用来生成页码的,我这里用了button来模拟,偷了个懒,其实实际应用中你可以使用链接或是span,道理都是一样的。我把第0个和最后一个当作时“上一页”和“下一页”的按钮,生成button时要设置他的onclick事件,当然就是调用上面的createPage函数,然后将currentPage修改,在生成上一页和下一页的按钮时,注意它的click事件里要判断当前时第几页,注意到这些,其实也就没什么了。
细节其实就是不要忘记修改当前页和判断首页和尾页(写到这突然发现没写首页和尾页,不过博客里就先这样吧,其实首页和尾页与普通的页码是一样的)。
当然还有一些东西没做,比如页码多了之后,将后面的隐藏;直接跳转到某一页;点击到某一页的时候将本页的按钮变颜色等等,日后有空加上吧。。。
我在jsp里还输出了一下得到的json,然后下面才是对应的表格,效果图就放这吧,,
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<script type="text/javascript">
var currentPage;
$(document).ready(function(){
createPage(1,5,20);
currentPage = 1;
createbutton(5);
});
function createPage(currPage, limit, total){
var html = [], showNum = limit;
if (total - (currPage * limit) < 0) showNum = total - ((currPage - 1) * limit);
html.push(' <table class="table table-hover table-bordered" cellspacing="0" width="100%">');
html.push(' <thead><tr><th style="font-size: 20px">ID</th><th style="font-size: 20px">标题</th></tr></thead><tbody>');
console.log("ajax");
$.ajax({
url : "${pageContext.request.contextPath}/JsonTest",
dataTpye : "json",
data : {
"currpage":currPage,
"limit":limit
},
type : "post",
success : function(msg) {
$("#showjson").html(msg);
var data = jQuery.parseJSON(msg);
if (data.length>0) {
for (var i = 0; i < showNum; i++) {
html.push('<tr><td>' + data[i].id + '</td>');
html.push('<td>' + data[i].name + '</td>');
html.push('</tr>');
}
}
html.push('</tbody></table>');
var mainObj = $('#list');
mainObj.empty();
mainObj.html(html.join(''));
/* for(x in parsedJson){
$("#show").html(parsedJson[x].id+"----"+parsedJson[x].name);
} */
},
error:function(){ //请求失败的回调方法
alert("请求失败,请重试");
}
});
}
function createbutton(total) {
var inp;
for (var i = 0; i <= total; i++) {
if (i == total) {
inp = document.createElement("input");
inp.type = "button";
inp.value = "下一页";
inp.id = "nextpage";
inp.onclick = function() {
if (Number(currentPage) != total - 1) {
createPage(Number(currentPage) + 1, 5, 20);
currentPage = Number(currentPage) + 1;
console.log(currentPage);
}
};
} else if (i == 0) {
inp = document.createElement("input");
inp.type = "button";
inp.value = "上一页";
inp.id = "nextpage";
inp.onclick = function() {
if (Number(currentPage) != 1) {
createPage(Number(currentPage) - 1, 5, 20);
currentPage = Number(currentPage) - 1;
console.log(currentPage);
}
};
} else {
inp = document.createElement("input");
inp.type = "button";
inp.value = i;
inp.id = "page" + i;
inp.onclick = function() {
console.log($(this).val());
currentPage = $(this).val();
createPage($(this).val(), 5, 20);
console.log(currentPage);
};
}
document.getElementById("pages").appendChild(inp);
}
}
</script>
</head>
<body>
<p id="showjson"></p>
<hr>
<p id="show"></p>
<div id="list">
</div>
<hr>
<br><br><br><br><br>
<div style="float:left;height:30;width: 20%" id="pages">
</div>
</body>
</html>