jsp分页:使用Ajax+servlet+json实现分页

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Horizonhui/article/details/86288831

设计思路:

数据分页在写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的五个数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 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循环来模拟,循环变量的取值当然就与当前页和每页多少数据有关,至于怎么计算,应该是挺简单的。。。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 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,然后下面才是对应的表格,效果图就放这吧,,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
 <%@ 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>