bootstrap table+spring boot + mybatis实现分页加载
前端
bootstrap table，后端spring boot + mybatis实现分页加载。 效果如下
数据库数据配置
Navicat Premium Data Transfer
Source Server : localhost
Source Server Type : MySQL
Source Server Version : 80012
Source Host : localhost:3306
Source Schema : test
Target Server Type : MySQL
Target Server Version : 80012
File Encoding : 65001
Date: 28/02/2019 11:47:17
*/
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for T_ROLE
-- ----------------------------
DROP TABLE IF EXISTS `T_ROLE`;
CREATE TABLE `T_ROLE` (
`ROLE_ID` int(11) NOT NULL,
`ROLE_NAME` varchar(100) NOT NULL,
`REMARK` varchar(100) DEFAULT NULL,
`CREATE_TIME` date NOT NULL,
`MODIFY_TIME` date DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of T_ROLE
-- ----------------------------
BEGIN;
INSERT INTO `T_ROLE` VALUES (23, '用户管理员', '负责用户的增删改操作', '2018-01-09', NULL);
INSERT INTO `T_ROLE` VALUES (1, '管理员', '管理员', '2017-12-27', '2018-02-24');
INSERT INTO `T_ROLE` VALUES (2, '测试账号', '测试账号', '2017-12-27', '2018-01-23');
INSERT INTO `T_ROLE` VALUES (3, '注册账户', '注册账户，只可查看，不可操作', '2017-12-29', '2018-02-24');
INSERT INTO `T_ROLE` VALUES (24, '系统监控员', '可查看系统监控信息，但不可操作', '2018-01-09', '2018-03-07');
INSERT INTO `T_ROLE` VALUES (25, '用户查看', '查看用户，无相应操作权限', '2018-01-09', NULL);
INSERT INTO `T_ROLE` VALUES (63, '影院工作者', '可查看影视信息', '2018-02-06', '2018-03-07');
INSERT INTO `T_ROLE` VALUES (64, '天气预报员', '可查看天气预报信息', '2018-02-27', NULL);
INSERT INTO `T_ROLE` VALUES (65, '文章审核', '文章类', '2018-02-27', '2018-03-13');
COMMIT;
SET FOREIGN_KEY_CHECKS = 1;
后端框架配置
相关maven库
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.2</version>
</dependency>
<!-- thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.3</version>
</dependency>
</dependencies>
H5页面
由于使用thymeleaf所以在resources文件下创建templates文件加用于放置H5页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>人员信息</title>
<link rel="stylesheet" data-th-href="@{css/bootstrap/bootstrap.min.css}">
<script data-th-src="@{js/jquery.min.js}"></script>
<script data-th-src="@{js/tether/tether.min.js}"></script>
<script data-th-src="@{js/bootstrap/bootstrap.min.js}"></script>
<link rel="stylesheet" data-th-href="@{css/bootstrap-table/bootstrap-table.min.css}">
<script data-th-src="@{js/bootstrap-table/bootstrap-table.min.js}"></script>
<script data-th-src="@{js/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
</head>
<body>
<form class="form">
<div class="row">
<div class="col">
<div class="input-group">
<span class="input-group-addon">角色：</span>
<div class="form-group">
<input type="text" name="roleName" class="form-control">
</div>
</div>
</div>
<div class="col"></div>
<div class="col">
<button type="button" class="btn btn-success" onclick="refresh()">重置</button>
<button type="button" class="btn btn-primary" onclick="search()">搜索</button>
</div>
</div>
</form>
<table id="roleTable" data-mobile-responsive="true" class="mb-bootstrap-table text-nowrap"></table>
</body>
<script>
$('#roleTable').bootstrapTable({
method: 'get', // 服务器数据的请求方式 get or post
url:"/userList", // 服务器数据的加载地址
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 5, //每页的记录行数（*）
pageList: [5, 25, 50, 100], //可供选择的每页的行数（*）
strictSearch: true,
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
uniqueId: "ID", //每一行的唯一标识，一般为主键列
cardView: false,
detailView: false, //是否显示详细视图
smartDisplay: false,
queryParams: function(params) {
return {
pageSize: params.limit,
pageNum: params.offset / params.limit + 1,
roleName: $(".form").find("input[name='roleName']").val().trim(),
};
},
columns: [{
checkbox: true
},{
field: 'roleId',
title: '角色ID'
},{
field: 'roleName',
title: '角色'
}, {
field: 'remark',
title: '描述'
}, {
field: 'createTime',
title: '创建时间'
}, {
field: 'modifyTime',
title: '修改时间'
}]
});
// 搜索方法
function search() {
$('#roleTable').bootstrapTable('refresh');
}
// 重置方法
function refresh() {
$(".form")[0].reset();
search();
}
</script>
</html>
该页面先引入bootstrap依赖，然后引入bootstrap-table依赖。<body>里使用<table>完成页面的布局。