目录
2、配置mybatis-config.xml中分页插件拦截器
一、集成分页插件PageHelper
1、添加Maven依赖
<!-- Mybatis-PageHelper分页插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.1.6</version>
</dependency>
2、配置mybatis-config.xml中分页插件拦截器
<plugins>
<!--分页插件拦截器 -->
<plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
</plugins>
3、创建分页参数对象PageParam
package com.starfall.ssm.model;
import java.io.Serializable;
/**
* @name: 分页参数对象
* @description: 包括页码、数据大小、排序、导航页码 等
* @author: StarFall
* @data: 2019年2月15日下午10:11:10
*/
public class PageParam implements Serializable {
private static final long serialVersionUID = 1L;
private int pageNum = 1;
private int pageSize = 10;
private String orderBy;
// 导航页码 【1,2,3,4,5】
private int navigatePages = 5;
public PageParam() {
}
public PageParam(int pageNum) {
this.pageNum = pageNum;
}
public PageParam(int pageNum, int pageSize) {
this.pageNum = pageNum;
this.pageSize = pageSize;
}
public PageParam(int pageNum, int pageSize, int navigatePages) {
super();
this.pageNum = pageNum;
this.pageSize = pageSize;
this.navigatePages = navigatePages;
}
//getter、setter
}
二、后台代码中实现分页查询
1、controller层:
@RequestMapping("/get_emps_page")
public Map<String, Object> getEmpsByPage(PageParam pageParam) {
PageInfo<Employee> pageInfo = employeeService.getEmpsByPage(pageParam);
return ApiResult.SUCCESS.getMap().add("data", pageInfo);
}
2、service层:
public PageInfo<Employee> getEmpsByPage(PageParam pageParam) {
PageHelper.startPage(pageParam);
List<Employee> list = employeeMapper.selectByExample(null);
PageInfo<Employee> page = new PageInfo<Employee>(list, pageParam.getNavigatePages());
return page;
}
三、前端实现分页
1、emps.html代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="../resources/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../resources/css/emps.css">
<script src="../resources/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../resources/bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../resources/js/util/dateUtil.js" type="text/javascript"></script>
<script src="../resources/js/commConfig.js" type="text/javascript"></script>
</head>
<body>
<!-- 首页导航 -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- 主体 -->
<div class="container-fluid">
<div class="container">
<!-- 导航 -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav">
<li class="active"><a id="page_emp" class="navbar-brand" href="#">PAGE EMP</a></li>
</ul>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class=""><a id="all_emp" class="navbar-brand" href="#">ALL EMP</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron" id="page_emp_jumbotron">
<table class="table table-striped" id="page_emps_table">
<caption><h3>分页员工信息</h3>
</caption>
<thead>
<tr>
<th>id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>phone</th>
<th>HireDate</th>
<th>Salary</th>
<th>job</th>
<th>Department</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!-- 分页条 -->
<nav aria-label="Page navigation">
<ul class="pagination" id="page_nav_ul">
</ul>
</nav>
<nav aria-label="Page navigation" id="page_nav_info">
</nav>
</div>
<div class="jumbotron" id="all_emp_jumbotron">
<table class="table table-striped" id="all_emps_table">
<caption><h3>所有员工信息</h3>
</caption>
<thead>
<tr>
<th>id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>phone</th>
<th>HireDate</th>
<th>Salary</th>
<th>job</th>
<th>Department</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script type="text/javascript">
getEmpPage(1, GBasePageSize);
/**
* 点击查看全部emp
*/
$("#all_emp").click(function(event) {
$("#page_emp_jumbotron").hide();
$("#all_emp_jumbotron").show();
$("#all_emp").parent().addClass('active');
$("#page_emp").parent().removeClass('active');
getAllEmp();
});
/**
* 点击分页查看emp
*/
$("#page_emp").click(function(event) {
$("#all_emp_jumbotron").hide();
$("#page_emp_jumbotron").show();
$("#page_emp").parent().addClass('active');
$("#all_emp").parent().removeClass('active');
getEmpPage(1, GBasePageSize);
});
/**
* 分页获取员工信息
* @param {[type]} pageNum [页码]
* @param {[type]} pageSize [大小]
* @return {[type]} [description]
*/
function getEmpPage(pageNum, pageSize) {
$("#all_emp_jumbotron").hide();
$("#page_emp_jumbotron").show();
$("#page_emp").parent().addClass('active');
$("#all_emp").parent().removeClass('active');
$.ajax({
url: '/emps/get_emps_page',
type: 'GET',
data: { 'pageNum': pageNum, 'pageSize': pageSize },
success: function(response) {
var emps = response.data.list;
loadTableData("#page_emps_table tbody", emps);
loadPageNav(response.data);
loadPageInfo(response.data);
}
})
.fail(function() {
//console.log("error");
})
}
/**
* 获取所有的emp信息
* @return {[type]} [description]
*/
function getAllEmp() {
$("#page_emp_jumbotron").hide();
$("#all_emp_jumbotron").show();
$("#all_emp").parent().addClass('active');
$("#page_emp").parent().removeClass('active');
$.ajax({
url: '/emps/get_all_emps',
type: 'GET',
success: function(response) {
var emps=response.list;
loadTableData("#all_emps_table tbody", emps);
}
})
.fail(function() {
//alert("error");
})
}
/**
* table加载数据
* @param {[type]} itemId [table的id]
* @param {[type]} data [emp数据]
*/
function loadTableData(itemId, data) {
$(itemId).empty();
$.each(data, function(index, item) {
var empId = $("<th></th>").append(item.employeeId);
var firstName = $("<td></td>").append(item.firstName);
var lastName = $("<td></td>").append(item.lastName);
var email = $("<td></td>").append(item.email);
var phone = $("<td></td>").append(item.phoneNumber);
var hireDate = $("<td></td>").append(longtimeToDate(item.hireDate));
var salary = $("<td></td>").append(item.salary);
var job = $("<td></td>").append(item.jobId);
var department = $("<td></td>").append(item.departmentId);
$("<tr></tr>").append(empId)
.append(firstName)
.append(lastName)
.append(email)
.append(phone)
.append(hireDate)
.append(salary).append(job).append(department)
.appendTo(itemId);
});
}
/**
* 加载分页条
* @param {[type]} data [分页条数据]
* @return {[type]} [description]
*/
function loadPageNav(data) {
$("#page_nav_ul").empty();
//首页
var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
//前一页
var prePageLi = $("<li></li>").append($("<a></a>").append("«").attr("href","#"));
if (!data.hasPreviousPage) {
prePageLi.addClass("disabled");
firstPageLi.addClass("disabled");
} else {
prePageLi.click(function() {
getEmpPage(data.pageNum - 1, GBasePageSize);
});
firstPageLi.click(function() {
getEmpPage(1, GBasePageSize);
});
}
$("#page_nav_ul").append(firstPageLi).append(prePageLi);
$.each(data.navigatepageNums, function(index, item) {
var li = $("<li></li>").append($("<a></a>").append(item).attr("href","#"));
li.click(function() {
getEmpPage(item, GBasePageSize);
});
$("#page_nav_ul").append(li);
});
//尾页
var lastPageLi = $("<li></li>").append($("<a></a>").append("尾页").attr("href","#"));
//下一页
var nextPageLi = $("<li></li>").append($("<a></a>").append("»").attr("href","#"));
if (!data.hasNextPage) {
nextPageLi.addClass("disabled");
lastPageLi.addClass("disabled");
} else {
nextPageLi.click(function() {
getEmpPage(data.pageNum + 1, GBasePageSize);
});
lastPageLi.click(function() {
getEmpPage(data.pages, GBasePageSize);
});
}
$("#page_nav_ul").append(nextPageLi).append(lastPageLi);
}
/**
* 加载分页信息
* @param {[type]} data [description]
* @return {[type]} [description]
*/
function loadPageInfo(data) {
$("#page_nav_info").empty();
$("#page_nav_info").append("当前" + data.pageNum + "页,总" +
data.pages + "页,总" +
data.total + "条记录");
}
</script>
</html>