标签：pageNum 分页 admin 页数 PageHelper 使用 page 页面
目录
1、导入pom
<!-- MyBatis分页插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.0.0</version>
</dependency>
2、配置spring-mybaits文件
配置在sqlSessionFactory中
<!-- 配置插件 -->
<property name="plugins">
<array>
<!-- PageHelper插件全类名 -->
<bean class="com.github.pagehelper.PageHelper">
<!-- 配置插件属性 -->
<property name="properties">
<props>
<!-- 配置数据库方言,这里用的是mysql数据库 -->
<!-- MySQL分页：LIMIT -->
<!-- Oracle分页：TopN分析 -->
<prop key="dialect">mysql</prop>
<!-- 配置自动修正页码，页数不能小于1，不能大于总页数 -->
<!-- pageNo的有效范围：1~总页数 -->
<prop key="reasonable">true</prop>
</props>
</property>
</bean>
</array>
</property>
3、后台分页
查询所有，查询关键字，可以共用
// 查询用户，分页
@RequestMapping("/admin/query/for/search")
public String queryForSearch(
//如果页面没有提供参数，可以使用defaultValue设置默认值
@RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum,
@RequestParam(value = "pageSize", defaultValue = "5") Integer pageSize,
@RequestParam(value = "keyword", defaultValue = "") String keyword,
Model model) {
// 1.调用PageHelper的工具方法，开启分页功能
PageHelper .startPage(pageNum,pageSize);
// 2.执行分页查询,根据条件查询，如果keyword为空，就查所有
List<Admin> list = adminMapper.selectAdminListByKeyword(keyword);
// 3.将list封装到PageInfo对象中
PageInfo<Admin> pi=new PageInfo<>(list);
// 4、最后存入model中
model.addAttribute("pageInfo",pi);
return "admin-page";
}
4、使用jQuery的前端分页插件：Pagination
这里的jsp页面使用jQuery的分页插件：Pagination，需要用得到jquery.pagination.js文件和pagination.css文件，这里提供下载地址
下载地址：资源链接
提取码：y7my
下载后的css文件放入css文件夹即可，js文件放入jquery文件夹即可，然后在jsp页面中导入css和jquery
4.1 导入需要的js和css
//导入pagination.css
<link rel="stylesheet" href="css/pagination.css" />
//导入jquery.pagination.js
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>
4.2 script方法
<script type="text/javascript">
$(function() {
//回调函数的作用是显示对应分页的列表项内容
//回调函数在用户每次点击分页链接的时候执行
//参数page_index{int整型}表示当前的索引页
var initPagination = function() {
// 总记录数
var totalRecord = ${requestScope['PAGE-INFO'].total}
// 显示分页导航条
$("#Pagination").pagination(totalRecord, {
num_edge_entries : 3, //边缘页数，就是两边显示的页数数量
num_display_entries : 5, //主体页数，就是中间显示的页数
callback : pageselectCallback, //回调函数
items_per_page : ${requestScope['PAGE-INFO'].pageSize}, //每页显示几条数据
current_page : ${requestScope['PAGE-INFO'].pageNum-1}, //当前页页码
prev_text : "上一页" ,
next_text : "下一页"
});
}();
//每次点击上一页下一页或者具体的页码，执行这个函数跳转页面
function pageselectCallback(pageIndex, jq) {
//pageIndex从0开始,pageNum从1开始
var pageNum=pageIndex+1;
//跳转页面
window.location.href="admin/query/for/search.html?pageNum=" + pageNum;
return false;
}
});
</script>
分页的显示，加入以下div
<div id="Pagination" class="pagination"></div>
4.3 JSP页面所有代码
<%@ 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 lang="UTF-8">
<%@ include file="/WEB-INF/include-head.jsp"%>
<link rel="stylesheet" href="css/pagination.css" />
<script type="text/javascript" src="script/jquery.pagination.js"></script>
<script type="text/javascript">
$(function() {
//回调函数的作用是显示对应分页的列表项内容
//回调函数在用户每次点击分页链接的时候执行
//参数page_index{int整型}表示当前的索引页
var initPagination = function() {
// 总记录数
var totalRecord = ${requestScope.pageInfo.total}
// 显示分页导航条
$("#Pagination").pagination(totalRecord, {
num_edge_entries : 3, //边缘页数，就是两边显示的页数数量
num_display_entries : 5, //主体页数，就是中间显示的页数
callback : pageselectCallback, //回调函数
items_per_page : ${requestScope.pageInfo.pageSize}, //每页显示几条数据
current_page : ${requestScope.pageInfo.pageNum-1}, //当前页页码
prev_text : "上一页" ,
next_text : "下一页"
});
}();
//每次点击上一页下一页或者具体的页码，执行这个函数跳转页面
function pageselectCallback(pageIndex, jq) {
//pageIndex从0开始,pageNum从1开始
var pageNum=pageIndex+1;
//跳转页面
window.location.href="admin/query/for/search.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/query/for/search.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 class="form-control has-success" type="text" name="keyword"
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.info.list }">
<tr>
<td style="text-align: center;" colspan="6">抱歉！没有符合您要求的查询结果</td>
</tr>
</c:if>
<c:if test="${!empty requestScope.pageInfo.list }">
<c:forEach items="${requestScope.pageInfo.list }"
var="admin" varStatus="myStatus">
<tr>
<td>${myStatus.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>
<button type="button" class="btn btn-danger btn-xs">
<i class=" glyphicon glyphicon-remove"></i>
</button>
</td>
</tr>
</c:forEach>
</c:if>
</tbody>
<tfoot>
<tr>
<td colspan="6" align="center">
<div id="Pagination" class="pagination"></div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
引用了boostrap的一些样式就是以下显示，不要样式也可以，以上代码查询功能也完成了
5、简单的前端分页显示，不需要框架
<div>
<c:if test="${pageInfo.hasPreviousPage}">
<a href="home?pageNum=1">首页</a>
<a href="home?pageNum=${pageInfo.pageNum-1}">上一页</a>
</c:if>
<c:if test="${pageInfo.hasNextPage}">
<a href="home?pageNum=${pageInfo.pageNum+1}">下一页</a>
<a href="home?pageNum=${pageInfo.pages}">末页</a>
</c:if>
<span>第${pageInfo.pageNum}页/共${pageInfo.pages}页</span>
</div>
WuWuII
发布了13 篇原创文章 · 获赞 0 · 访问量 374
私信
关注
标签：pageNum,分页,admin,页数,PageHelper,使用,page,页面 来源： https://blog.csdn.net/a3562323/article/details/104577068
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。