轻松实现JavaWeb分页，提高网站性能和用户体验

后端

2023-05-05 22:19:03

Java Web 分页指南：提升网站性能和用户体验

在 Web 开发中，分页是一个至关重要的功能，它可以大大提升网站的性能和用户体验。通过分页，我们将数据划分为较小的、易于管理的页面，从而减少页面加载时间并增强浏览体验。

分页的三个基本步骤

确定页大小

页大小决定了每页显示的数据量。这一设置应根据具体情况调整，既不能太大导致页面加载缓慢，也不能太小导致频繁的翻页操作。

计算总页数

总页数等于数据总数除以页大小。例如，如果数据总数为 1000，页大小为 10，则总页数为 100。

使用分页导航

分页导航允许用户在页面之间无缝切换。常见的导航元素包括：

首页：跳转到第一页
上一页：跳转到上一页
下一页：跳转到下一页
尾页：跳转到最后一页

Java Web 分页实现

可以使用多种技术在 Java Web 中实现分页。下面介绍两种常见的方法：

使用 Servlet 实现分页

// 获取当前页码
int currentPage = Integer.parseInt(request.getParameter("currentPage"));

// 获取页大小
int pageSize = Integer.parseInt(request.getParameter("pageSize"));

// 计算数据总量
int totalRecords = dao.getTotalRecords();

// 计算总页数
int totalPages = totalRecords / pageSize;

// 获取当前页数据
List<T> data = dao.getData(currentPage, pageSize);

// 设置分页导航
request.setAttribute("currentPage", currentPage);
request.setAttribute("totalPages", totalPages);
request.setAttribute("data", data);

// 跳转到分页页面
request.getRequestDispatcher("/page.jsp").forward(request, response);

使用 JSP 实现分页

<%@ page import="java.util.List" %>
<%@ page import="com.example.dao.Dao" %>
<%@ page import="com.example.model.T" %>

<%
// 获取当前页码
int currentPage = Integer.parseInt(request.getParameter("currentPage"));

// 获取页大小
int pageSize = Integer.parseInt(request.getParameter("pageSize"));

// 计算数据总量
int totalRecords = Dao.getTotalRecords();

// 计算总页数
int totalPages = totalRecords / pageSize;

// 获取当前页数据
List<T> data = Dao.getData(currentPage, pageSize);

// 设置分页导航
request.setAttribute("currentPage", currentPage);
request.setAttribute("totalPages", totalPages);
request.setAttribute("data", data);
%>

<html>
<head>

</head>
<body>

<table border="1">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<%
for (T t : data) {
%>
<tr>
<td><%= t.getId() %></td>
<td><%= t.getName() %></td>
<td><%= t.getAge() %></td>
</tr>
<%
}
%>
</tbody>
</table>

<nav>
<ul>
<li><a href="?currentPage=1&pageSize=<%= pageSize %>">首页</a></li>
<li><a href="?currentPage=<%= currentPage - 1 %>&pageSize=<%= pageSize %>">上一页</a></li>
<li><a href="?currentPage=<%= currentPage + 1 %>&pageSize=<%= pageSize %>">下一页</a></li>
<li><a href="?currentPage=<%= totalPages %>&pageSize=<%= pageSize %>">尾页</a></li>
</ul>
</nav>

</body>
</html>