bootstrap table+spring boot + mybatis实现分页加载

最新推荐文章于 2024-08-30 12:02:27 发布

泥瓦酱

最新推荐文章于 2024-08-30 12:02:27 发布

阅读量2.8k

点赞数 3

文章标签： bootstrap java springboot 分页加载

本文链接：https://blog.csdn.net/lucky9322/article/details/88029149

版权

前端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;

后端框架配置

`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>完成页面的布局。

在这里插入图片描述