版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhuyu19911016520/article/details/81706270
上篇介绍 增删改查 后，本篇将集成翻页功能，翻页功能将使用第三方pagehelper插件实现，下面直接晒干货
1.接着上一篇的代码，在项目中添加 pagehelper-spring-boot-starter 依赖 ， 下载源码 expend
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.5</version>
</dependency>2.添加Page、DTO类，用来前后台传输数据与参数
/**
* 前后台数据传输dto
*/
public class MvcDataDto {
public static final String Success = "success";
public static final String Fail = "fail";
private String resultCode;
private String resultMessage;
private Object resultObj;
private Object param;
private Page page;
getter setter ......
} public class Page {
private int pageSize = 20;
private int currentPage = 1;
private int totalRecord;
getter setter ......
} 3.集成 pagehelper 对代码的改动很小
1).给ICustomerService接口添加一个获取翻页数据的方法
PageInfo<Customer> listPages(MvcDataDto param);2).CustomerServiceImpl进行实现
@Override
public PageInfo<Customer> listPages(MvcDataDto param) {
PageInfo<Customer> customers = null;
Page page = param.getPage();
if(page != null){
//翻页关键，调用插件的翻页方法，把前端的翻页数据传进插件
PageHelper.startPage(page.getCurrentPage() , page.getPageSize());
List<Customer> list = customerMapper.listPages();
customers = new PageInfo<>(list);
}
return customers;
}3).Dao接口下的CustomerMapper.java，添加listPages接口
List<Customer> listPages();4).mybatis mapper.xml中，无须加任何翻页sql，和写普通sql一样，代码如下:
<!-- 翻页 -->
<select id="listPages" resultMap="BaseResultMap">
select id, name, age, is_use
from customers
order by id desc
</select>5).在CustomerController中，添加2个方法，一个打开翻页列表界面，一个返回翻页数据
//打开翻页页面
@RequestMapping("pages")
public String listPages(){
return "customer/pages";
}
//返回翻页数据
@ResponseBody
@RequestMapping("getListPage")
public Object getListPage(String param){
MvcDataDto data = JSON.parseObject(param , MvcDataDto.class);
return customerService.listPages(data);
}6).添加pages.html页面，引用了公用翻页 page.js文件，可以在源码或下载，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{border-collapse:collapse;margin-left: auto;margin-right: auto;}
table,th, td{border: 1px solid black;padding: 5px;text-align: center;}
/*page css*/
.margin_tp40 {margin-top:40px;}
.eu_turnPage {font-size:0; text-align:center;}
.eu_turnPage a {display:inline-block;text-decoration: none; width:45px; height:35px; margin:0 2px; border-radius:3px; background:#fff; border:solid 1px #e0e0e0; font-size:15px; text-align:center; line-height:35px; vertical-align:middle;}
.eu_turnPage a.red_bg:hover {color:#fff!important;}
.eu_turnPage a:hover {color:#f0503c!important;}
.eu_turnPage a.eu_turnPage_txt {background:none; border:none; width:auto; height:35px; cursor:default; color:#666; font-size:13px; font-weight:normal;}
.eu_turnPage a.eu_turnPage_txt:hover {color:#666 !important; }
.eu_turnPage a.eu_turnPage_input input{border:none; background:none;width:30px; margin:0 auto; height:33px; line-height:33px; text-align:center;}
.eu_turnPage a.eu_turnPage_go {background:#ccc; border-color:#ccc;cursor: pointer;width:50px;}
.eu_turnPage a.eu_turnPage_go:hover {background:#d8d8d8;}
.eu_turnPage a.eu_turnPage_go input {border:none; background:none;width:30px; margin:0 auto; height:33px; line-height:33px; text-align:center; font-weight:bold;}
.red_bg {
background-color: #0036E0!important;
border-color: #0036E0!important;
color: #fff !important;
}
</style>
</head>
<body>
<div>
<br/>
<br/>
<div style="text-align: center">
<a href="/customers/edit">新增用户</a>
</div>
<br/>
<br/>
<table>
<thead>
<th width="20%">id</th>
<th width="20%">name</th>
<th width="20%">age</th>
<th width="20%">isUse</th>
<th width="20%">操作</th>
</thead>
<tbody id="customers">
<tr>
<td>1</td>
<td>zhuyu</td>
<td>26</td>
<td>false</td>
<td>
<a th:href="@{/customers/edit?id=1}">编辑</a>
<a th:href="@{/customers/del/1}">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="pages tc">
<div class="eu_turnPage margin_tp40">
<a href="#"><</a>
<a href="#">1</a>
<a class="eu_turnPage_txt">…</a>
<a href="#">8</a>
<a href="#" class="red_bg">9</a>
<a href="#">10</a>
<a href="#">11</a>
<a href="#">12</a>
<a class="eu_turnPage_txt">…</a>
<a href="#">16</a>
<a href="#">></a>
<a class="eu_turnPage_txt" style="margin-left:10px;">跳转到</a>
<a class="eu_turnPage_input"><input type="text" value="" /></a>
<a class="eu_turnPage_go"><input style="cursor: pointer;" type="button" value="GO"/></a>
</div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/page.js}"></script>
<script>
var page , isFirst = true , pageSize = 2;
$(function(){
page = new ykhPage({pageCount : 1 , pageIndex : 5 });
getData();
})
function getData(){
var currentPage = isFirst ? 1 : page.getPageIndex();
var datas = {
page : { currentPage : currentPage , pageSize : pageSize },
param : { }
};
$.ajax({
type : "POST" ,
url : "/customers/getListPage" ,
data : { param : JSON.stringify(datas) } ,
success : function (results) {
console.log(results);
if(results && results.list.length > 0){
var html = '';
for(var i=0; i < results.list.length ; i++){
var item = results.list[i]
html +='<tr><td>'+item.id+'</td><td>'+item.name+'</td><td>'+item.age+'</td><td>'+item.isUse+'</td>\n' +
' <td>\n' +
' <a href="/customers/edit?id='+item.id+'">编辑</a> \n' +
' <a href="/customers/del/'+item.id+'">删除</a>\n' +
' </td>\n' +
' </tr>';
}
$("#customers").html(html);
if(isFirst){
page.initPageCount(results.total , pageSize);
isFirst = false;
}
}
}
})
}
function pageUp(){
page.pageUp();
getData();
}
function pagedown(){
page.pagedown();
getData();
}
function goPage(){
if(parseInt(page.getLocationCount()) <= parseInt(page.getPageCount())){
page.goPage();
getData();
}
}
function choicePage(t){
page.choicePage(t);
getData();
}
function updown(){
page.updown();
getData();
}
</script>
</body>
</html>7).启动项目，访问: http://localhost:8001/customers/pages
第一页
翻到第二页
本例简单了演示了怎么集成 pagehelper插件，返回的列表数据能很好的和前端datatable插件集成，展示更好看的列表
这里贴出第一页与第二页返回的翻页 json 数据 ， 返回的数据里面有 插件查询出来的 总数据total，当前页pageNum，每页数据pageSize等信息
