jsp 页面实现分页

最新推荐文章于 2025-05-26 15:27:43 发布

原创最新推荐文章于 2025-05-26 15:27:43 发布 · 437 阅读

CC 4.0 BY-SA版权

本文介绍了如何在JSP中使用PageHelper进行分页操作，包括在Pom.xml中添加依赖，将pageUtil包拷贝到指定目录，配置mybatis的applicationContext和mybatis-config，放置js包，更新分页页面，拷贝listPage.js，编写控制器分页方法及重写实现层。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.1 Pom.xml文件中加入pagehelper依赖

<!-- 分页 -->
		<!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper -->
		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper</artifactId>
			<version>4.1.5</version>
		</dependency>
		<dependency>
			<groupId>jsptags</groupId>
			<artifactId>pager-taglib</artifactId>
			<version>2.0</version>
		</dependency>

1.2 把包pageUtil拷贝到framework.utils目录下

在这里插入图片描述

1.3 applicationContext-fy.xml拷贝到mybatis文件中

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD SQL MAP Config 3.1//EN" 
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
	<settings>
		<setting name="callSettersOnNulls" value="true" />
	</settings>
	<!-- 配置分页插件 -->
	<plugins>
		<!-- com.github.pagehelper为PageHelper类所在包名 -->
		<plugin interceptor="com.github.pagehelper.PageHelper">
			<!--方言： 设置数据库类型 Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL六种数据库 -->
			<property name="dialect" value="mysql" />
		</plugin>
	</plugins>
</configuration>

1.4 在mybatis-config中添加如下代码

		<!-- 分页相关 -->
		<setting name="callSettersOnNulls" value="true" />
	</settings>

	<!-- 分页相关 -->
	<plugins>
		<!-- com.github.pagehelper为PageHelper类所在包名 -->
		<plugin interceptor="com.github.pagehelper.PageHelper">
			<!-- 设置数据库类型 Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL六种数据库 -->
			<property name="dialect" value="mysql" />
		</plugin>
	</plugins>

1.5 把js包放到webapp应用下面

在这里插入图片描述

1.6 在分页页面中加入相应插件js和csss，并增加其他部分

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<!-- 增加1 -->



<%-- 分页相关 --%>
<script type="text/javascript" src="<%=basePath%>js/jquery.js"></script>
<script type="text/javascript" src="<%=basePath%>js/kkpager/jpager.js"></script>
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>js/kkpager/jpager.css">
<script type="text/javascript"
	src="<%=basePath%>view/system/user/listPage.js"></script>
<script type="text/javascript">
        function load() {
        	arrayPage(${pageResult.pages},${pageResult.total});
        }
</script>





</head>
<body onload="load()"><!-- 增加2-->







	<div align="center">
		<h1>用户列表页面</h1>
		<hr>
		<form method="post" action="">
			<div>
				<table align="center" border="1" width="80%">
					<tr>
						<td>用户ID</td>
						<td>名称</td>
						<td>年龄</td>
						<td>性别</td>
						<td>爱好</td>
						<td>登录名</td>
						<td>密码</td>
						<td>创建时间</td>
					</tr>







<!--<c:forEach items="${userList}" var="user"><!-- 增加3 -->






					<c:forEach items="${pageResult.dataList}" var="user"><!-- 增加3 -->
						<tr>
							<td><input type="checkbox" name="id[]"
								value="${user.userId }" />${user.userId }</td>
							<td>${user.name }</td>
							<td>${user.age }</td>
							<td>${user.sex }</td>
							<td>${user.hobby }</td>
							<td>${user.loginName }</td>
							<td>${user.password }</td>
							<td><fmt:formatDate value="${user.createTime }"
									pattern="yyyy-MM-dd HH:ss:mm" /></td>
						</tr>
					</c:forEach>
				</table>
			</div>







			<div align="center" id="jpager"></div><!-- 增加4 -->










		</form>
	</div>
</body>
</html>

1.7 拷贝listPage.js

1.8 在控制器写分页方法

public ModelAndView listPage(@RequestParam(value = "pageNumber", defaultValue = "1") Integer pageNumber,
			@RequestParam(value = "pageSize", defaultValue = "5") Integer pageSize) {
		System.out.println("------------------传统---------------------");
		ModelAndView mv = new ModelAndView();
		// 当前页和每页的条数
		// 传入数据到分页工具类
		PagedResult<User> pageResult = userService.getAllByPage(pageNumber, pageSize);
		// 数据传递到前台页面展示层
		mv.addObject("pageResult", pageResult);
		mv.setViewName("system/user/userList");
		return mv;
	}

1.9 重写实现层

// 1.调用分页插件
		PageHelper.startPage(pageNumber, pageSize);
		// 2.查询数据库，获取数据
		List<User> userlist = userMapper.queryAllUser();
		// 3.通过分页工具类加载分页数据
		return PageBeanUtil.toPagedResult(userlist);