当管理成百上千条数据，并在列表显示时，数据全部放在一页显示效率低而且加载速度会变慢。这时就需要将数据分页显示。
示例：
具体思路为，编写 PageBean 获取总的记录数、每页显示条数和当前页码，并通过计算获取总页码数。并按页获取数据存入 list，每次点下一页获取之后的数据，每次点前一页显示之前的数据，根据当前页码和每页显示数，多次获取列表数据并显示。并要注意下一页上一页功能可能出现的bug。
编写 PageBean 类
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
| public class PageBean<T> {
private int totalCount;
private int totalPage;
private List<T> list;
private int currentPage;
private int rows;
public int getTotalCount() {
return totalCount;
}
public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public List<T> getList() {
return list;
}
public void setList(List<T> list) {
this.list = list;
}
public int getCurrentPage() {
return currentPage;
}
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
public int getRows() {
return rows;
}
public void setRows(int rows) {
this.rows = rows;
}
@Override
public String toString() {
return "PageBean{" +
"totalCount=" + totalCount +
", totalPage=" + totalPage +
", list=" + list +
", currentPage=" + currentPage +
", rows=" + rows +
'}';
}
}
|
编写FindUserByPageServlet
从页面获取当前页码和每页显示条数，调用 service 进行查询
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
| @WebServlet("/findUserByPageServlet")
public class FindUserByPageServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String currentPage = request.getParameter("currentPage");
String rows = request.getParameter("rows");
if(currentPage == null || "".equals(currentPage)){
currentPage = "1";
}
if(rows == null || "".equals(rows)){
rows = "5";
}
UserSvice service = new UserServiceImpl();
PageBean<User> pb = service.finUserByPage(currentPage,rows);
request.setAttribute("pb",pb);
request.getRequestDispatcher("/list.jsp").forward(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
|
Service方法的编写
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
| @Override
public PageBean<User> finUserByPage(String _currentPage, String _rows) {
int currentPage = Integer.parseInt(_currentPage);
int rows = Integer.parseInt(_rows);
if(currentPage <= 0){
currentPage = 1;
}
PageBean<User> pb = new PageBean<User>();
pb.setCurrentPage(currentPage);
pb.setRows(rows);
int totalCount = dao.findTotalCount();
pb.setTotalCount(totalCount);
int start = (currentPage - 1) * rows;
List<User> list = dao.findByPage(start,rows);
pb.setList(list);
int totalPage = totalCount % rows == 0 ? totalCount/rows : totalCount/rows + 1;
pb.setTotalPage(totalPage);
return pb;
}
|
Dao方法编写
- 获取数据总条数
- 根据获取的要开始查找的索引 start 和 所需查找的条数 rows 查找对应数量数据
1
2
3
4
5
6
7
8
9
10
11
| @Override
public int findTotalCount() {
String sql = "select count(*) from user";
return template.queryForObject(sql,Integer.class);
}
@Override
public List<User> findByPage(int start, int rows) {
String sql = "select * from user limit ? , ?";
return template.query(sql,new BeanPropertyRowMapper<User>(User.class),start,rows);
}
|
前端页面编写
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
| <form id="form1" action="${pageContext.request.contextPath}/delSelectedServlet" method="post">
<table border="1" class="table table-bordered table-hover">
<tr class="success">
<th><input type="checkbox" id="firstCb"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>籍贯</th>
<th>QQ</th>
<th>邮箱</th>
<th>操作</th>
</tr>
<c:forEach items="${pb.list}" var="user" varStatus="s">//将PageBean获取的list展示到页面
<tr>
<th><input type="checkbox" name="uid" value="${user.id}"></th>
<td>${s.count}</td>
<td>${user.name}</td>
<td>${user.gender}</td>
<td>${user.age}</td>
<td>${user.address}</td>
<td>${user.qq}</td>
<td>${user.email}</td>
<td><a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/findUserServlet?id=${user.id}">修改</a>
<a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id});">删除</a></td>
</tr>
</c:forEach>
</table>
</form>
<div>//分页组件
<nav aria-label="Page navigation">
<ul class="pagination">
<c:if test="${pb.currentPage == 1}"><li class="disabled"></c:if>
<c:if test="${pb.currentPage != 1}"><li></c:if>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage - 1}&rows=5" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<c:forEach begin="1" end="${pb.totalPage}" var="i">
<c:if test="${pb.currentPage == i}">
<li class="active"><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5">${i}</a></li>
</c:if>
<c:if test="${pb.currentPage != i}">
<li><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5">${i}</a></li>
</c:if>
</c:forEach>
//下一页按钮禁用状态及报错处理
<c:if test="${pb.currentPage == pb.totalPage}"><li class="disabled"><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage}&rows=5" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li></c:if>
<c:if test="${pb.currentPage < pb.totalPage}"><li><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage + 1}&rows=5" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
<span style="font-size: 25px;margin-left: 5px">
共${pb.totalCount}条记录，共${pb.totalPage}页
</span>
</ul>
</nav>
</div>
|
