Java实现分页功能

最新推荐文章于 2024-01-11 15:53:54 发布

dengke1

最新推荐文章于 2024-01-11 15:53:54 发布

阅读量1.5k

点赞数

文章标签： java web

本文链接：https://blog.csdn.net/dengke1/article/details/109078490

版权

什么是分页

我的理解就是将很多的数据把它分成一页一页的形式，就像书本一样将内容分成很多页来进行阅读，在很多的网页中都会有分页的功能比如：淘宝的商品显示页面，现在比较流行的各大网站都会有这个分页的功能。

在这里插入图片描述
pom.xml文件内容（这里只引入了分页插件的依赖）

<!-- MyBatis 分页插件 -->
		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper</artifactId>
		</dependency>

Service层（只取其中重要部分）

PageInfo<Admin> getPageInfo(String keyword,Integer pageNum,Integer pageSize);

pageNum：表示的第几页数据
pageSize：每页数据有多少
实现类
调用PageHelper的startPage方法开启分页功能，然后执行查询（查询所有的数据存在list集合中），
在封装在PageInfo中

@Override
	public PageInfo<Admin> getPageInfo(String keyword, Integer pageNum, Integer pageSize) {
		// 1.调用PageHelper的静态方法开启分页功能
		PageHelper.startPage(pageNum, pageSize);
		
		// 2.执行查询
		List<Admin> list = adminMapper.selectAdminByKeyword(keyword);
		
		// 3.封装到PageInfo中
		
		
		return new PageInfo<>(list);
	}

jsp页面

<%@page import="com.fasterxml.jackson.annotation.JsonInclude.Include"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<%@include file="/WEB-INF/include-head.jsp"%>
<link rel="stylesheet" href="css/pagination.css" />
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>
<script type="text/javascript">
	$(function(){
		initPagination();
	})
	
	function initPagination(){
		//获取总记录数
		var totalRecord = ${requestScope.pageInfo.total};
		
		
		//声明一个JSON对象存储Pagination要设置的属性
		var properties = {
				num_edge_entries: 3, // 边缘页数
				num_display_entries: 5, // 主体页数
				callback: pageSelectCallback, // 用户点击“翻页”按钮之后执行翻页操作的回调函数
				current_page: ${requestScope.pageInfo.pageNum-1}, // 当前页，pageNum 从 1 开始，必须-1 后才可以赋值
				prev_text: "上一页", 
				next_text: "下一页",
				items_per_page: ${requestScope.pageInfo.pageSize} // 每页显示 1 项
};
		//生成页码导航条
		
		$("#Pagination").pagination(totalRecord,properties);
			
		
	}
	
	//用户点击翻页时，调用这个函数实现页面跳转
	
	function pageSelectCallback(pageIndex,jQuery){
		//根据pageIndex计算得到PageNum
		var pageNum =pageIndex+1;
		
		//跳转页面
		window.location.href= "admin/get/page.html?pageNum="+pageNum+"&keyword=${param.keyword}";
		
		//由于每一个按钮都是超链接，取消默认行为
		return false;
	}
</script>
<body>

	<%@include file="/WEB-INF/include-nav.jsp"%>
	<div class="container-fluid">
		<div class="row">
			<%@include file="/WEB-INF/include-sidebar.jsp"%>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">
							<i class="glyphicon glyphicon-th"></i> 数据列表
						</h3>
					</div>
					<div class="panel-body">
						<form action="admin/get/page.html" method="post" class="form-inline" role="form" style="float: left;">
							<div class="form-group has-feedback">
								<div class="input-group">
									<div class="input-group-addon">查询条件</div>
									<input name="keyword" class="form-control has-success" type="text"
										placeholder="请输入查询条件">
								</div>
							</div>
							<button type="submit" class="btn btn-warning">
								<i class="glyphicon glyphicon-search"></i> 查询
							</button>
						</form>
						<button type="button" class="btn btn-danger"
							style="float: right; margin-left: 10px;">
							<i class=" glyphicon glyphicon-remove"></i> 删除
						</button>
						<button type="button" class="btn btn-primary"
							style="float: right;" onclick="window.location.href='add.html'">
							<i class="glyphicon glyphicon-plus"></i> 新增
						</button>
						<br>
						<hr style="clear: both;">
						<div class="table-responsive">
							<table class="table  table-bordered">
								<thead>
									<tr>
										<th width="30">#</th>
										<th width="30"><input type="checkbox"></th>
										<th>账号</th>
										<th>名称</th>
										<th>邮箱地址</th>
										<th width="100">操作</th>
									</tr>
								</thead>
								<tbody>

									<!-- 假设没有查到数据 -->
									<c:if test="${empty requestScope.pageInfo.list}">
										<tr>
											<td colspan="6" align="center">抱歉！没有查询到您要的数据</td>
										</tr>
									</c:if>
									<!-- 有数据 -->
									<c:if test="${!empty requestScope.pageInfo.list}">
										<c:forEach items="${requestScope.pageInfo.list}" var="admin"
											varStatus="status">
											<tr>
												<td>${status.count}</td>
												<td><input type="checkbox"></td>
												<td>${admin.loginAcct}</td>
												<td>${admin.userName}</td>
												<td>${admin.email}</td>
												<td>
													<button type="button" class="btn btn-success btn-xs">
														<i class=" glyphicon glyphicon-check"></i>
													</button>
													<button type="button" class="btn btn-primary btn-xs">
														<i class=" glyphicon glyphicon-pencil"></i>
													</button>
													
													<a href="admin/remove/${admin.id}.html" class="btn btn-danger btn-xs"><i class="glyphicon glyphicon-remove"></i></a>
												</td>
											</tr>
										</c:forEach>
									</c:if>
								</tbody>
								<tfoot>
									<tr>
										<td colspan="6" align="center">
											<div id="Pagination" class="pagination">
												<!-- 这里显示分页 -->
											</div>
											</ul>
										</td>
									</tr>

								</tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>
</html>

控制层

/**
	 * 分页显示
	 * @param keyword：条件查询关键字
	 * @param pageNum：第几页开始
	 * @param pageSize：每一页的数据数量
	 * @param modelMap
	 * @return
	 */
	@RequestMapping("/admin/get/page.html")
	public String getPageInfo(@RequestParam(value="keyword",defaultValue="")String keyword,
			@RequestParam(value="pageNum",defaultValue="1")Integer pageNum,
			@RequestParam(value="pageSize",defaultValue="5")Integer pageSize,
			ModelMap modelMap){
		// 1.调用Service方法获取PageInfo对象
		PageInfo<Admin> pageInfo = adminService.getPageInfo(keyword, pageNum, pageSize);
		// 2.将PageInfo对象存入模型
		modelMap.addAttribute(CrowdConstant.ATTR_NAME_PAGE_INFO, pageInfo);
		return "admin-page";
	}