SpringBoot+Mybatis实现后台分页
1.首先我们新建一个springboot工程
在pom.xml中引用分页插件，千万不要引用错了。
<!--分页插件-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.3</version>
</dependency>
<dependency>
2.Controller层
package com.springboot.controller;
import com.github.pagehelper.PageInfo;
import com.springboot.beans.HttpResponseEntity;
import com.springboot.service.PageService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@RestController
public class PageController {
@Autowired
private PageService pageService;
@PostMapping(value = "/selectAll", headers = "Accept=application/json")
public HttpResponseEntity selectAll(@RequestBody PageInfo pageInfo) {
return pageService.selectAll(pageInfo);
}
}
3.Service层
package com.springboot.service;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.springboot.beans.HttpResponseEntity;
import com.springboot.dao.PageMapper;
import com.springboot.dao.entity.Page;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class PageService {
@Autowired
private PageMapper pageMapper;
public HttpResponseEntity selectAll(PageInfo pageInfo) {
PageHelper.startPage(pageInfo.getPageNum(), pageInfo.getPageSize());
Page page = new Page();
List<Page> list = pageMapper.selectAll(page);
PageInfo pageInfo1 = new PageInfo(list);
return HttpResponseEntity.createBySuccessData(pageInfo1);
}
}
4.Mapper
List<Page> selectAll(Page record);
5.xml
<select id="selectAll" parameterType="com.springboot.dao.entity.Page" resultMap="BaseResultMap">
select
*
from page
</select>
6.前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href="bootstrap-table-develop/dist/bootstrap-table.min.css" >
<script type="text/javascript" src="jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-table-develop/dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>
</head>
<body>
<div>
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<table id="userTable" style="text-align: center;font-size: 14px;margin: auto;word-wrap:break-word; word-break:break-all" >
</table>
</div>
</body>
</html>
7.js（这里用到的是bootstrap-table）
$(function () {
//初始化表格
var oTable = new TableInit();
oTable.Init();
});
function TableInit() {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#userTable').bootstrapTable({
url: 'http://localhost:8080/selectAll', //请求后台的URL（*）
method: 'POST', //请求方式（*）
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
toolbar: '#toolbar', //工具按钮用哪个容器
sortOrder: "asc", //排序方式
queryParamsType: '',
dataType: 'json',
paginationShowPageGo: true,
showJumpto: true,
pageNumber: 1, //初始化加载第一页，默认第一页
queryParams: queryParams,//请求服务器时所传的参数
sidePagination: 'server',//指定服务器端分页
pageSize: 4,//单页记录数
pageList: [4, 10, 15, 20],//分页步进值
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
silent: true,
showRefresh: true, //是否显示刷新按钮
showToggle:true, //是否显示详细视图和列表视图的切换按钮
clickToSelect: true, //是否启用点击选中行
showColumns: true, //是否显示所有的列
cardView: false, //是否显示详细视图
minimumCountColumns: 2, //最少允许的列数
uniqueId: "id", //每一行的唯一标识，一般为主键列
columns: [{
checkbox: true
// visible: false
}, {
field: 'id',
title: '序号',
align: 'center',
formatter: function (value, row, index) {
return index + 1;
}
},
{
field: 'name',
title: '姓名',
align: 'center',
width: '230px'
},
{
field: 'sex',
title: '性别',
align: 'center',
width: '230px'
},
{
field: 'age',
title: '年龄',
align: 'center',
width: '230px'
},
{
field: 'address',
title: '地址',
align: 'center'
}],
responseHandler: function (res) { //后台返回的结果
console.log(res);
if(res.code == "200"){
var userInfo = res.data.list;
var NewData = [];
if (userInfo.length) {
for (var i = 0; i < userInfo.length; i++) {
var dataNewObj = {
'id': '',
"name": '',
'sex': '',
'age': '',
'address': ''
};
dataNewObj.id = userInfo[i].id;
dataNewObj.name = userInfo[i].name;
dataNewObj.sex = userInfo[i].sex;
dataNewObj.age = userInfo[i].age;
dataNewObj.address = userInfo[i].address;
NewData.push(dataNewObj);
}
console.log(NewData)
}
var data = {
total: res.data.total,
rows: NewData
};
return data;
}
}
});
};
// 得到查询的参数
function queryParams(params) {
var userName = $("#keyWord").val();
console.log(userName);
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
pageNum: params.pageNumber,
pageSize: params.pageSize,
username: userName
};
return JSON.stringify(temp);
}
return oTableInit;
}
//刷新表格
function getUserList() {
$("#userTable").bootstrapTable('refresh');
}
8.数据库表
9.我们来启动一下看看
10.这样我们就实现了分页