我是阿福,公众号「阿福聊编程」作者, 一个在后端技术路上摸盘滚打的程序员,在进阶的路上,共勉!文章已收录在 JavaSharing 中,包含Java技术文章,面试指南,资源分享。
思路分析
MyBatis的PageHelper插件(后台)
作用
以完全非侵入的方式在原有查询基础上附加分页效果。从SQL层面来说,在SQL语句后面附加LIMIT子句。从Java代码来说,把原来返回的List类型封装为Page类型。
依赖信息
com.github.pagehelper
pagehelper
4.0.0
配置方式
那么如何让插件起作用呢?就需要在SqlSessionFactoryBean中配置MyBatis插件
mysql
true
数据库的Sql 脚本
SELECT
*
FROM
t_admin
WHERE
loginacct LIKE CONCAT('%','ad','%')
OR username LIKE CONCAT('%','ad','%')
OR email LIKE CONCAT('%','ad','%')
AdminMapper配置文件
id, loginacct, userpswd, username, email, createtime
Mapper接口
List queryAdminByKeyWord(@Param("keyword") String keyword);
AdminServiceImpl
public PageInfo queryForKeywordSearch(int pageNum, int pageSize, String keyword) {
//调用PageHelper的工具方法,开启分页功能
PageHelper.startPage(pageNum, pageSize);
List adminBeans = adminMapper.queryAdminByKeyWord(keyword);
//执行分页查询
return new PageInfo(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 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";
}
到这里后台的功能都实现完了,下面来实现前台的功能。
页面显示 主体部分(前台)
前台页面
#
账号
名称
邮箱地址
操作
抱歉,没有用户查询的数据!!!!
${myStatus.count}
${item.loginAcct}
${item.userName}
${item.email}
页面导航条部分的实现
使用一个基于jQuery的分页插件:Pagination
环境搭建
加入样式文件,pagination.css引入工程,在需要的页面引用pagination.css
加入Pagination的js文件,在需要的页面引用jquery.pagination.js,这里要注意一下,需要把源码文件中 这段代码注释掉:opts.callback(current_page, this); 因为在这个地方重新加载页面,会造成死循环。
分页导航条需要在HTML标签中加入的部分
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;
};
关键词查询
点击查询的按钮就可以实现分页查询的功能了。