本文在jsp页面通过el表达式完成后台数据的分页查询和显示。
1、前提约束
2、技术选型
- 前端分页插件jquery paginator
- 后端分页插件pagehelper
3、导入依赖的js、css
- bootstrap.min.3.3.5.css
- jquery-1.11.2.min.js
- jqPaginator.js【注意，这里导入的是jqPaginator.js，而不是jquery.pagination.js】
4、在pom.xml中加入jstl依赖
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
5、在webapp下创建一个页面showstudents.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="/css/bootstrap.min.3.3.5.css"/>
<script src="/js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="/js/jqPaginator.js" type="text/javascript"></script>
</head>
<body>
<table class="table table-bordered table-striped">
<tr>
<th>用户编号</th>
<th>用户姓名</th>
</tr>
<c:forEach items="${pageInfo.list}" var="itemDto">
<tr>
<td class="text-center">${itemDto.id}</td>
<td class="text-center">${itemDto.name}</td>
</tr>
</c:forEach>
</table>
<%--分页--%>
<script type="text/javascript">
var if_firstime = true;
window.onload = function () {
$('.pagination').jqPaginator({
totalPages: ${pageInfo.pages},
visiblePages: 10,
currentPage: ${pageInfo.pageNum},
first: '<li class="first"><a href="javascript:void(0);">第一页</a></li>',
prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
last: '<li class="last"><a href="javascript:void(0);">最末页 </a></li>',
page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
onPageChange: function (num) {
debugger;
if (if_firstime) {
if_firstime = false;
} else if (!if_firstime) {
var href = window.location.href.split("?")[0];
href=href+"?pageSize=3&pageNum="+num;
window.location.href = href;
}
}
});
}
</script>
<div class="pagination-layout">
<div class="pagination">
<ul class="pagination" total-items="pageInfo.totalRows" max-size="10" boundary-links="true">
</ul>
</div>
</div>
</body>
</html>
6、在StudentController.java中加入"/student/query/el"api的实现
@RequestMapping(value = "/student/query/el", method = RequestMethod.GET)
public String queryStudents1(int pageNum, int pageSize, ModelMap modelMap) throws Exception {
PageHelper.startPage(pageNum, pageSize);
List<Student> students = studentService.queryStudents();
PageInfo<Student> pageInfo = new PageInfo<Student>(students);
modelMap.put("pageInfo", pageInfo);
return "forward:/showstudents.jsp";
}
7、测试
打开浏览器，输入http://localhost:8088/student/query/el?pageSize=3&pageNum=1
具体操作如下：
（测试分页）
至此，我们完成在jsp页面通过el表达式分页显示用户信息，并做了测试。