共计 5658 个字符，预计需要花费 15 分钟才能阅读完成。
我是阿福，公众号「阿福聊编程」作者， 一个在后端技术路上摸盘滚打的程序员 ，在进阶的路上，共勉！文章已收录在 JavaSharing 中，蕴含 Java 技术文章，面试指南，资源分享。
思路剖析
MyBatis 的 PageHelper 插件（后盾）
作用
以齐全非侵入的形式在原有查问根底上附加分页成果。从 SQL 层面来说，在 SQL 语句前面附加 LIMIT 子句。从 Java 代码来说，把原来返回的 List 类型封装为 Page 类型。
依赖信息
<!-- MyBatis 分页插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.0.0</version>
</dependency>配置形式
那么如何让插件起作用呢？就须要在 SqlSessionFactoryBean 中配置 MyBatis 插件
<!-- 配置 SqlSessionFactoryBean-->
<bean id="sqlSessionFactoryBean" class="org.mybatis.spring.SqlSessionFactoryBean">
<!-- 拆卸数据源 -->
<property name="dataSource" ref="dataSource"></property>
<!--mybatis 配置文件所在的地位 -->
<property name="configLocation" value="classpath:/mybstis/mybatis-config.xml"></property>
<!-- 配置 mapper 所在的文件地位 -->
<property name="mapperLocations" value="classpath:/mybstis/mapper/*Mapper.xml"></property>
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageHelper">
<!-- 配置插件属性 -->
<property name="properties">
<props>
<!-- 配置数据库方言 -->
<!-- MySQL 分页：LIMIT -->
<!-- Oracle 分页：TopN 剖析 -->
<prop key="dialect">mysql</prop>
<!-- 配置主动修改页码 -->
<!-- pageNo 的无效范畴：1~ 总页数 -->
<prop key="reasonable">true</prop>
</props>
</property>
</bean>
</array>
</property>
</bean>数据库的 Sql 脚本
SELECT
*
FROM
t_admin
WHERE
loginacct LIKE CONCAT('%','ad','%')
OR username LIKE CONCAT('%','ad','%')
OR email LIKE CONCAT('%','ad','%')
AdminMapper 配置文件
<resultMap id="BaseResultMap" type="com.zfcoding.model.AdminBean" >
<id column="id" property="id" jdbcType="INTEGER" />
<result column="loginacct" property="loginAcct" jdbcType="VARCHAR" />
<result column="userpswd" property="userPswd" jdbcType="CHAR" />
<result column="username" property="userName" jdbcType="VARCHAR" />
<result column="email" property="email" jdbcType="VARCHAR" />
<result column="createtime" property="createTime" jdbcType="CHAR" />
</resultMap>
<sql id="Base_Column_List" >
id, loginacct, userpswd, username, email, createtime
</sql>
<select id="queryAdminByKeyWord" parameterType="java.lang.String" resultMap="BaseResultMap">
SELECT
<include refid="Base_Column_List"/>
FROM
t_admin
WHERE
loginacct LIKE CONCAT('%',#{keyword},'%')
OR username LIKE CONCAT('%',#{keyword},'%')
OR email LIKE CONCAT('%',#{keyword},'%')
</select> Mapper 接口
List<AdminBean> queryAdminByKeyWord(@Param("keyword") String keyword);AdminServiceImpl
public PageInfo<AdminBean> queryForKeywordSearch(int pageNum, int pageSize, String keyword) {
// 调用 PageHelper 的工具办法，开启分页性能
PageHelper.startPage(pageNum, pageSize);
List<AdminBean> adminBeans = adminMapper.queryAdminByKeyWord(keyword);
// 执行分页查问
return new PageInfo<AdminBean>(adminBeans);
}AdminController
@RequestMapping("/queryAdmin")
public String queryAdminByKeyword(@RequestParam(value = "pageNum", defaultValue = "1") int pageNum,
@RequestParam(value = "pageSize", defaultValue = "5") int pageSize,
@RequestParam(value = "keyword", defaultValue = "") String keyword,
Model model) {PageInfo<AdminBean> adminBeanPageInfo = adminService.queryForKeywordSearch(pageNum, pageSize, keyword);
model.addAttribute(CrowdFundingConstant.ATTR_NAME_PAGE_INFO, adminBeanPageInfo);
return "admin/admin-page";
}常量类
public class CrowdFundingConstant {public static final String ATTR_NAME_PAGE_INFO="PAGEINFO-ADMIN";}到这里后盾的性能都实现完了，上面来实现前台的性能。
页面显示 主体局部（前台）
前台页面
<table class="table table-bordered">
<thead>
<tr>
<th width="30">#</th>
<th width="30"><input id="summaryBox" type="checkbox"></th>
<th> 账号 </th>
<th> 名称 </th>
<th> 邮箱地址 </th>
<th width="100"> 操作 </th>
</tr>
</thead>
<tbody>
<c:if test="${empty requestScope['PAGEINFO-ADMIN'].list}">
<tr>
<td style="text-align: center" colspan="6"> 道歉，没有用户查问的数据！！！！</td>
</tr>
</c:if>
<c:if test="${! empty requestScope['PAGEINFO-ADMIN'].list}">
<c:forEach items="${requestScope['PAGEINFO-ADMIN'].list}" var="item"
varStatus="myStatus">
<tr>
<td>${myStatus.count}</td>
<th width="30"><input class="itemBox" type="checkbox"></th>
<td>${item.loginAcct}</td>
<td>${item.userName}</td>
<td>${item.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-danger btn-xs uniqueRemoveBtn"><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>页面导航条局部的实现
应用一个基于 jQuery 的分页插件：Pagination
环境搭建
退出款式文件，pagination.css 引入工程，在须要的页面援用 pagination.css
<link rel="stylesheet" href="css/pagination.css"/> 退出 Pagination 的 js 文件，在须要的页面援用 jquery.pagination.js，这里要留神一下，须要把源码文件中 这段代码正文掉：opts.callback(current_page, this); 因为在这个中央从新加载页面，会造成死循环。
<script type="text/javascript" src="script/jquery.pagination.js"></script> 分页导航条须要在 HTML 标签中退出的局部
<tr>
<td colspan="6" align="center">
<div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
</td>
</tr>jQuery 代
// 申明函数封装导航条初始化操作
function initPagination() {
// 申明变量存储总记录数
var totalRecord = ${requestScope['PAGEINFO-ADMIN'].total};
// 申明变量存储分页导航条显示时的属性设置
var paginationProperties = {
num_edge_entries: 3, // 边缘页数
num_display_entries: 5, // 主体页数
callback: pageselectCallback, // 回调函数
items_per_page: ${requestScope['PAGEINFO-ADMIN'].pageSize}, // 每页显示数据数量，就是 pageSize
current_page: ${requestScope['PAGEINFO-ADMIN'].pageNum - 1},// 当前页页码
prev_text: "上一页", // 上一页文本
next_text: "下一页" // 下一页文本
};
// 显示分页导航条
$("#Pagination").pagination(totalRecord, paginationProperties);
};
// 在每一次点击“上一页”、“下一页”、“页码”时执行这个函数跳转页面
function pageselectCallback(pageIndex, jq) {
// pageIndex 从 0 开始，pageNum 从 1 开始
var pageNum = pageIndex + 1;
// 跳转页面
window.location.href = "admin/queryAdmin.action?pageNum=" + pageNum + "&keyword=${param.keyword}";
return false;
};关键词查问
<form class="form-inline" action="/admin/queryAdmin.action" method="post" 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" name="keyword" type="text"
placeholder="请输出查问条件">
</div>
</div>
<button type="submit" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查问
</button>
</form>点击查问的按钮就能够实现分页查问的性能了。
源码下载
正文完