当前位置：首页 > news >正文

【JavaWeb】Servlet+JSP 实现分页功能

news 来源：原创 2025/6/22 7:43:19

文章目录

思路
- 数据抽出
- 功能设计
功能模块
- 工具类
- 前端内容
- 用户端数据处理

思路

数据抽出

需要显示的数据，查询的数据抽出；
进行分页显示，需要统计抽出的件数，然后根据页面显示尺寸调整显示页面内容；

功能设计

翻页需要包含的内容：
1. 首页/尾页
2. 上一页/下一页
3. 页码跳转，指定页跳转
需要有的参数：
1. 当前页码
2. 总页数
3. 当前页所显示的件数
4. 总件数
5. 显示内容范围：当前页*页面件数
需要计算页面的件数和页数：
1. 当前件数不满足页面内容，显示当前页

功能模块

工具类

定义基础参数

private int pageIndex = 1; // 当前页码
private int pageSize; // 总页数
private int totalCount;  // 总记录数
private int totalPageCount; // 每页显示的记录数

生成相关的getter、setter方法，调整相关方法的实现，赋值到时候一定要考虑到异常规避

    /*** 获取当前页码* @return pageIndex*/public int getPageIndex() {return pageIndex;}/*** 设置当前页* @param pageIndex 当前页码*/public void setPageIndex(int pageIndex) {if (pageIndex > 0) {this.pageIndex = pageIndex;}}/*** 获取每页显示的记录数* @return pageSize*/public int getPageSize() {return pageSize;}/*** 设置每页显示的记录数* @param pageSize*/public void setPageSize(int pageSize) {if (pageSize > 0) {this.pageSize = pageSize;} else {this.pageSize = 10;}}/*** 获取总记录数* @return totalCount*/public int getTotalCount() {return totalCount;}/*** 设置总记录数* @param totalCount 总记录数*/public void setTotalCount(int totalCount) {if (totalCount > 0) {this.totalCount = totalCount;setByPageNo(totalCount);}}/*** 获取总页数* @return totalPageCount*/public int getTotalPageCount() {return totalPageCount;}/*** 设置总页数* @param totalPageCount 总页数*/public void setTotalPageCount(int totalPageCount) {this.totalPageCount = totalPageCount;}

设置页数，在获取件数之后计算当前页数。需要防止非法字符越界等操作

    /*** 根据总记录数设置总页数* 此方法用于计算分页时的总页数，基于当前的每页记录数（pageSize）** @param totalCount 总记录数，即需要分页处理的数据总量*/private void setByPageNo(int totalCount) {if (this.pageSize <= 0) {this.pageSize = 10; // 防止非法值影响计算}// 计算总页数：如果总记录数除以每页记录数的余数为0，则总页数为总记录数除以每页记录数；// 否则，总页数为总记录数除以每页记录数加1this.totalPageCount = totalCount % pageSize == 0 ? totalCount / pageSize :totalCount / pageSize + 1;}

前端内容

导入共同的翻页式样，设置hidden项：保存当前的页面件数

<div><table><li></li><li></li></table><input type="hidden" id="totalPageCount" value="${totalPageCount}"/><c:import url="rollpage.jsp"><c:param name="totalCount" value="${totalCount}"/><c:param name="currentPageNo" value="${currentPageNo}"/><c:param name="totalPageCount" value="${totalPageCount}"/></c:import>
</div>

调用的翻页jsp如下：文本输入框需要检查非法字符

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"></script>
</head>
<body><div class="page-bar"><ul class="page-num-ul clearfix"><li>共${param.totalCount }条记录&nbsp;&nbsp; ${param.currentPageNo }/${param.totalPageCount }页</li><c:if test="${param.currentPageNo > 1}"><a href="javascript:page_nav(document.forms[0],1);">首页</a><a href="javascript:page_nav(document.forms[0],${param.currentPageNo-1});">上一页</a></c:if><c:if test="${param.currentPageNo < param.totalPageCount }"><a href="javascript:page_nav(document.forms[0],${param.currentPageNo+1 });">下一页</a><a href="javascript:page_nav(document.forms[0],${param.totalPageCount });">最后一页</a></c:if>&nbsp;&nbsp;</ul><span class="page-go-form"><label>跳转至</label><input type="text" name="inputPage" id="inputPage" class="page-key" />页<button type="button" class="page-btn" onClick='jump_to(document.forms[0],document.getElementById("inputPage").value)'>GO</button></span></div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/rollpage.js"></script>
</html>

JS代码如下，检查非法字符

function page_nav(frm,num){frm.pageIndex.value = num;frm.submit();
}function jump_to(frm,num){//alert(num);//验证用户的输入const regexp = /^[1-9]\d*$/;let totalPageCount = document.getElementById("totalPageCount").value;//alert(totalPageCount);if(!regexp.test(num)){alert("请输入大于0的正整数！");return false;}else if((num-totalPageCount) > 0){alert("请输入小于总页数的页码");return false;}else{page_nav(frm,num);}
}

用户端数据处理

Servlet

 private void query(HttpServletRequest req, HttpServletResponse resp) {// 默认分页设置int currentPageNo = 1;int pageSize = 5;// 获取request请求路径中当前页码参数    String pageIndex = req.getParameter("pageIndex");// 非空验证，如果参数页码为空显示默认页数currentPageNo = pageIndex == null ? currentPageNo : Integer.parseInt(pageIndex);// 创建UserService实例UserService userService = new UserServiceImpl();List<User> userList;// 获取用户总数，用于分页int totalCount = userService.getUserCount(queryUserName, queryUserRole);// 创建并配置PageSupport对象PageSupport pageSupport = new PageSupport();// 设置分页当前页码pageSupport.setPageIndex(currentPageNo);// 设置分页总页数pageSupport.setPageSize(pageSize);// 设置分页总数pageSupport.setTotalCount(totalCount);// 计算总页数int totalPageCount = pageSupport.getTotalPageCount();// 校验当前页码if (currentPageNo < 1) {currentPageNo = 1;} else if (currentPageNo > totalPageCount) {currentPageNo = totalPageCount;}// 根据查询条件和分页信息获取用户列表userList = userService.getUserList(queryUserName, queryUserRole, currentPageNo, pageSize);// 将用户列表和其他信息存储在请求对象中req.setAttribute("userList", userList);req.setAttribute("totalCount", totalCount);req.setAttribute("currentPageNo", currentPageNo);req.setAttribute("totalPageCount", totalPageCount);// 将内容转发到list页面进行内容显示req.getRequestDispatcher("/jsp/userlist.jsp").forward(req, resp);}


// 定义SQL语句，将翻页的数据条数 反映到SQL中，每次翻页进行一次DB交互
StringBuilder sql = new StringBuilder();
// 查询数据通过条件最后进行排序，筛选从哪一条开始到多少条
sql.append("select u.*, r.roleName as userRoleName from smbms_user u, smbms_role r where " +"u.userRole = r.id");
sql.append(" order by createDate DESC limit ?, ?");// 准备SQL语句执行
preparedStatement = connection.prepareStatement(sql.toString());// 定义参数，防止SQL注入导致异常
// currentPageNo 当前页码
// pageSize      每页数量
List<Object> list = new ArrayList<>();
// 计算上一页的最后一件
currentPageNo = (currentPageNo - 1) * pageSize;
list.add(currentPageNo);
list.add(pageSize);// 返回查询结构
ResultSet rs = BaseDao.executeQuery(connection, String.valueOf(sql), preparedStatement, params, rs);while (rs.next()) {// 内容赋值，赋值到要显示的对象中}