文章目录
思路
数据抽出
- 需要显示的数据，查询的数据抽出；
- 进行分页显示，需要统计抽出的件数，然后根据页面显示尺寸调整显示页面内容；
功能设计
- 翻页需要包含的内容：
- 首页/尾页
- 上一页/下一页
- 页码跳转，指定页跳转
- 需要有的参数：
- 当前页码
- 总页数
- 当前页所显示的件数
- 总件数
- 显示内容范围：当前页*页面件数
- 需要计算页面的件数和页数：
- 当前件数不满足页面内容，显示当前页
功能模块
工具类
- 定义基础参数
java
复制代码
private int pageIndex = 1; // 当前页码
private int pageSize; // 总页数
private int totalCount; // 总记录数
private int totalPageCount; // 每页显示的记录数
- 生成相关的getter、setter方法，调整相关方法的实现，赋值到时候一定要考虑到异常规避
java
复制代码
/**
* 获取当前页码
* @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;
}
- 设置页数，在获取件数之后计算当前页数。需要防止非法字符越界等操作
java
复制代码
/**
* 根据总记录数设置总页数
* 此方法用于计算分页时的总页数，基于当前的每页记录数（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项：保存当前的页面件数
html
复制代码
<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如下：文本输入框需要检查非法字符
html
复制代码
<%@ 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代码如下，检查非法字符
javascript
复制代码
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
java
复制代码
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
java
复制代码
// 定义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()) {
// 内容赋值，赋值到要显示的对象中
}