思路
數據抽出
- 需要顯示的數據，查詢的數據抽出；
- 進行分頁顯示，需要統計抽出的件數，然后根據頁面顯示尺寸調整顯示頁面內容；
功能設計
- 翻頁需要包含的內容：
- 首頁/尾頁
- 上一頁/下一頁
- 頁碼跳轉，指定頁跳轉
- 需要有的參數：
- 當前頁碼
- 總頁數
- 當前頁所顯示的件數
- 總件數
- 顯示內容范圍：當前頁*頁面件數
- 需要計算頁面的件數和頁數：
- 當前件數不滿足頁面內容，顯示當前頁
功能模塊
工具類
- 定義基礎參數
private int pageIndex = 1;
private int pageSize;
private int totalCount;
private int totalPageCount;
- 生成相關的getter、setter方法，調整相關方法的實現，賦值到時候一定要考慮到異常規避
public int getPageIndex() {return pageIndex;}public void setPageIndex(int pageIndex) {if (pageIndex > 0) {this.pageIndex = pageIndex;}}public int getPageSize() {return pageSize;}public void setPageSize(int pageSize) {if (pageSize > 0) {this.pageSize = pageSize;} else {this.pageSize = 10;}}public int getTotalCount() {return totalCount;}public void setTotalCount(int totalCount) {if (totalCount > 0) {this.totalCount = totalCount;setByPageNo(totalCount);}}public int getTotalPageCount() {return totalPageCount;}public void setTotalPageCount(int totalPageCount) {this.totalPageCount = totalPageCount;}
- 設置頁數，在獲取件數之后計算當前頁數。需要防止非法字符越界等操作
private void setByPageNo(int totalCount) {if (this.pageSize <= 0) {this.pageSize = 10; }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 }條記錄 ${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> </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){const regexp = /^[1-9]\d*$/;let totalPageCount = document.getElementById("totalPageCount").value;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;String pageIndex = req.getParameter("pageIndex");currentPageNo = pageIndex == null ? currentPageNo : Integer.parseInt(pageIndex);UserService userService = new UserServiceImpl();List<User> userList;int totalCount = userService.getUserCount(queryUserName, queryUserRole);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);req.getRequestDispatcher("/jsp/userlist.jsp").forward(req, resp);}
- Dao
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 ?, ?");
preparedStatement = connection.prepareStatement(sql.toString());
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()) {}
)
