一、通过limit查询语句实现分页，并展示
1.mapper.xml配置
?
|
1
2
3
|
<select id="selectusersbypage" parametertype="int" resultmap="usermap">
select * number from user limit #{page},10
</select>
|
查询user表，从第page项开始，每次返回10条数据
2.index.jsp
?
|
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
|
<html>
<head>
<title>page</title>
<link rel="stylesheet" type="text/css" href="css/index.css" rel="external nofollow" >
</head>
<body>
<div style="width: 100%;margin-top:20px;">
<table>
<tr style="background-color: #f5f5f5;">
<th>username</th>
<th>password</th>
<th>sex</th>
<th>email</th>
<th>createtime</th>
<th>updatetime</th>
</tr>
<div id = "show_data">
<c:choose>
<c:when test="${ulist != null}">
<c:foreach items="${ulist}" var="u">
<tr>
<td>${u.username}</td>
<td>${u.password}</td>
<td>${u.sex}</td>
<td>${u.email}</td>
<td><fmt:formatdate value="${u.create_time}" type="date"/></td>
<td><fmt:formatdate value="${u.update_time}" type="date"/></td>
</tr>
</c:foreach>
</c:when>
<c:otherwise>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</c:otherwise>
</c:choose>
</div>
</table>
<div class="page">
<div class="page_cell">首页</div>
<div class="page_cell" ip="up_page">上一页</div>
<div style="float: left;margin: 2px"><%=session.getattribute("page")%>/${ulist[0].number}</div>
<div class="page_cell" onclick="next_page(<%=session.getattribute("page")%>)">下一页</div>
<div class="page_cell">末页</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
</html>
|
3.css
?
|
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
|
body{
width: 100%;
margin: 0;
}
table{
border:1px solid red;
text-align: center;
margin: auto;
border-collapse: collapse;
}
tr{
border: 1px solid #ddd
}
th{
width: 150px;
font-weight: 700;
height: 36px;
}
td{
height: 36px;
}
.page{
margin: auto;
width: 300px;
text-align: center;
margin-top: 10px;
}
.page_cell{
float: left;
width: 50px;
border:1px solid #f5f5f5;
margin:2px;
cursor: pointer;
}
.page_cell:hover{
-webkit-box-shadow: #777 0px 0px 1px;
}
|
4.js
?
|
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
|
/**
* 下一页
*/
function next_page(page){
var data = {
"page":page
};
$.ajax({
type:"post",
url:"/rolecontrol/next_page.do",
data:json.stringify(data),
datatype:"json",
contenttype:"application/json",
success:function(data){
var show_data = document.getelementbyid("show_data")
show_data.innerhtml = " ";
for(i=0; i<data.length; i++){
//.....异步刷新页面
}
},
error:function(data){
alert("网络连接错误");
}
});
}
|
5.控制器
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
@requestmapping("/index.do")
public string index(modelmap map, httpsession session){
session.setattribute("page",1);
list<user> ulist = userservice.selectusersbypage(0);
map.put("ulist",ulist);
return "index";
}
/**
* 用户信息分页查询
* @param params
* @return
*/
@requestmapping(value = "/next_page.do",method = requestmethod.post)
@responsebody
public string getusersbypage(@requestbody jsonobject params){
// map<string,string> paramsmap = json.parseobject(params,new typereference<map<string,string>>(){});
system.out.println(params.get("page").tostring());
list<user> ulist = userservice.selectusersbypage(integer.parseint(params.get("page").tostring())*10);
return json.tojsonstring(ulist);
}
|
问题：在ajax传递json对象的时候，发生了415错误(未知媒体错误)
原因：
<mvc:annotation-driven />会自动注册defaultannotationhandlermapping和annotationmethodhandleradapter两个bean ，annotationmethodhandleradapter将会初始化7个转换器，可以通过调用annotationmethodhandleradapter的getmessageconverts()方法来获取转换器的一个集合 list<httpmessageconverter>
?
|
1
2
3
4
5
6
7
|
bytearrayhttpmessageconverter
stringhttpmessageconverter
resourcehttpmessageconverter
sourcehttpmessageconverter
xmlawareformhttpmessageconverter
jaxb2rootelementhttpmessageconverter
mappingjacksonhttpmessageconverter
|
解决：对于json的解析就是通过mappingjacksonhttpmessageconverter转换器完成的。所以就需要加入jackson依赖包：
?
|
1
2
3
4
5
6
7
8
9
10
11
|
<dependency>
<groupid>com.fasterxml.jackson.core</groupid>
<artifactid>jackson-core</artifactid>
<version>2.5.2</version>
</dependency>
<dependency>
<groupid>com.fasterxml.jackson.core</groupid>
<artifactid>jackson-databind</artifactid>
<version>2.5.2</version>
</dependency>
|
加了依赖包后问题就完美解决了，运行结果如下：
以上查询的数据是通过存储过程批量插入的：
