【JavaWeb】Servlet+JSP 實現分頁功能

文章目錄

思路
- 數據抽出
- 功能設計
功能模塊

思路

數據抽出

需要顯示的數據，查詢的數據抽出；
進行分頁顯示，需要統計抽出的件數，然后根據頁面顯示尺寸調整顯示頁面內容；

功能設計

翻頁需要包含的內容：
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，則總頁數為總記錄數除以每頁記錄數；
        // 否則，總頁數為總記錄數除以每頁記錄數加1
        this.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);
     
 }

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) 收藏舉報來源

刷新頁面返回頂部

柯基大大

【JavaWeb】Servlet+JSP 實現分頁功能

文章目錄

思路

數據抽出

功能設計

功能模塊

工具類

前端內容

用戶端數據處理

公告