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

文章目录

思路

数据抽出

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

功能设计

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

功能模块

工具类

  1. 定义基础参数
private int pageIndex = 1; // 当前页码
private int pageSize; // 总页数
private int totalCount;  // 总记录数
private int totalPageCount; // 每页显示的记录数
  1. 生成相关的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;
    }
  1. 设置页数，在获取件数之后计算当前页数。需要防止非法字符越界等操作
    /**
     * 根据总记录数设置总页数
     * 此方法用于计算分页时的总页数，基于当前的每页记录数（pageSize）
     *
     * @param totalCount 总记录数，即需要分页处理的数据总量
     */
    private void setByPageNo(int totalCount) {

        if (this.pageSize <= 0) {
            this.pageSize = 10; // 防止非法值影响计算
        }

        // 计算总页数：如果总记录数除以每页记录数的余数为0，则总页数为总记录数除以每页记录数；
        // 否则，总页数为总记录数除以每页记录数加1
        this.totalPageCount = totalCount % pageSize == 0 ? totalCount / pageSize :
                totalCount / pageSize + 1;
    }

前端内容

  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>
  1. 调用的翻页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>
  1. 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);
  }
}

用户端数据处理

  1. 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);
     
 }
  1. Dao

// 定义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()) {
    // 内容赋值，赋值到要显示的对象中
 }
posted @ 2025-06-21 17:10  柯基大大  阅读(23)  评论(0)    收藏  举报  来源