SpringBoot整合BootStrap4实现表格数据展示

一、前言

看过第十四篇的SpringBoot用Restful风格实现增删改查并使用MyBatis逆向工程  以下部分代码可以直接逆向工程哈，快速开发。

此篇对于逆向工程就不赘述了

二、准备工作

2.1 MySql创建一张学生表

DROP TABLE IF EXISTS `student`;
CREATE TABLE `student`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `sname` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
  `age` int(11) NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB;

2.2 添加数据

INSERT INTO `student` VALUES (1, '张一', 6);
INSERT INTO `student` VALUES (2, '张二', 7);
INSERT INTO `student` VALUES (3, '张三', 8);
INSERT INTO `student` VALUES (4, '张四', 6);
INSERT INTO `student` VALUES (5, '张武', 7);
INSERT INTO `student` VALUES (6, '张六', 6);
INSERT INTO `student` VALUES (7, '张琪', 6);
INSERT INTO `student` VALUES (8, '张八', 7);
INSERT INTO `student` VALUES (9, '张久', 8);
INSERT INTO `student` VALUES (10, '张小十', 7);
INSERT INTO `student` VALUES (11, '张十一', 6);

2.3 POM文件

   <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.8.1</version>
        </dependency>    
<!-- MySql -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <!--            <version>5.1.27</version>-->
            <scope>runtime</scope>
        </dependency>
        <!-- Druid -->
        <!--改为stater的方式  才可以监控-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.10</version>
        </dependency>

        <!-- Mybatis -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.3.2</version>
        </dependency>

        <!-- Mybatis逆向工程 -->
        <dependency>
            <groupId>org.mybatis.generator</groupId>
            <artifactId>mybatis-generator-core</artifactId>
            <version>1.3.7</version>
        </dependency>

        <!-- 分页 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.12</version>
        </dependency>

2.4 properties文件

#数据源类型
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
#spring.datasource.druid.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.driver-class-name = com.mysql.jdbc.Driver
spring.datasource.url = jdbc:mysql://localhost:3306/demo?useUnicode=true&characterEncoding=UTF-8&serverTimezone=GMT%2B8
spring.datasource.username = root
spring.datasource.password = 1234
##########Druid连接池配置
# 初始化大小，最小，最大
spring.datasource.initialSize=5
spring.datasource.minIdle=5
spring.datasource.maxActive=20

mybatis.type-aliases-package=com.demo6.demo.core.mapper
mybatis.mapper-locations=classpath:/mappers/*.xml

##PageHelper相关配置
pagehelper.helper-dialect = mysql
pagehelper.reasonable = true
pagehelper.support-methods-arguments = true
pagehelper.params= count= countSql

##thymeleaf 配置
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
#属性设置为false可以禁用模板引擎编译的缓存结果。
spring.thymeleaf.cache=false
#上下文
#server.servlet.context-path=
# 在构建URL时预先查看名称的前缀 （默认就是这个）
spring.thymeleaf.prefix=classpath:/templates/
# 构建URL时附加查看名称的后缀.（默认就是 html的结尾的）
spring.thymeleaf.suffix=.html

2.5 静态资源

文末会贴源码地址，可以直接去获取

三、实现功能

3.1 创建基础类和表格数据类

让Student类继承这个BaseEntity

public class BaseEntity implements Serializable {
    private static final long serialVersionUID = -4862029741755518291L;
    /** 页码 */
    private Integer pageNumber;

    /** 每页条数 */
    private Integer pageSize;

    public Integer getPageNumber() {
        return pageNumber;
    }

    public void setPageNumber(Integer pageNumber) {
        this.pageNumber = pageNumber;
    }

    public Integer getPageSize() {
        return pageSize;
    }

    public void setPageSize(Integer pageSize) {
        this.pageSize = pageSize;
    }
}

public class TableDataInfo implements Serializable {

    private static final long serialVersionUID = -6586058291723195495L;
    /** 总记录数 */
    private long total;

    /** 列表数据 */
    private List<?> rows;

    /** 消息状态码 */
    private int code;

    /** 消息内容 */
    private int msg;

    public long getTotal() {
        return total;
    }

    public void setTotal(long total) {
        this.total = total;
    }

    public List<?> getRows() {
        return rows;
    }

    public void setRows(List<?> rows) {
        this.rows = rows;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public int getMsg() {
        return msg;
    }

    public void setMsg(int msg) {
        this.msg = msg;
    }
}

3.2 BaseController

让StudentController继承BaseController

public class BaseController {
    protected TableDataInfo getDataTable(List<?> list)
    {
        TableDataInfo rspData = new TableDataInfo();
        rspData.setCode(0);
        rspData.setRows(list);
        rspData.setTotal(new PageInfo(list).getTotal());
        return rspData;
    }
}

3.3 StudentController

@Controller
@RequestMapping("/studentManage")
public class StudentController extends BaseController {

    @Autowired
    StudentService studentService;

    @RequestMapping("/toStudentPage")
    public String toStudentPage(){
        return "student";
    }

    @RequestMapping("/studentAll")
    @ResponseBody
    public TableDataInfo studentAll(Student student){
    List<Student> students = studentService.studentAll(student);
    return  getDataTable(students);
    }
}

3.4 StudentServiceImpl

接口类就不贴了，没啥意思

@Service("studentService")
public class StudentServiceImpl implements StudentService {
    @Autowired
    StudentMapper studentMapper;

    @Override
    public List<Student> studentAll(Student student) {
        int pageNum = student.getPageNumber();
        int pageSize = student.getPageSize();
        StudentExample example = new StudentExample();
        StudentExample.Criteria criteria = example.createCriteria();
        //有查询条件在这里写
        PageHelper.startPage(pageNum,pageSize);
        return studentMapper.selectByExample(example);
    }
}

 3.5 重点戏  student.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/style.min.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap-table/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div class="container-fluid p-t-15">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <header class="card-header">
                    <div class="callout callout-danger">
                        学生信息
                    </div>
                </header>
                <div class="card-body">
                    <div id="toolbar" class="toolbar-btn-action" style="margin-bottom: 3%">
                        <form class="form-inline">
                            <div class="form-group">
                                <label class="sr-only" for="sname">学生姓名</label>
                                <input class="form-control mb-2 mr-sm-2" type="text" id="sname" name="sname" placeholder="请输入学生姓名">
                            </div>
                            <div class="form-group">
                                <a class="btn btn-success" style="margin-left:20px;margin-top:-3px" onclick="searchStudent()">
                                    <i class="fa fa-search"></i> 查询
                                </a>
                            </div>
                        </form>
                    </div>
                    <table id="studentTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
$(document).ready(function() {
//1.初始化Table
 new TableInit();
});
//初始化表格
var TableInit = function () {
//先销毁表格
$('#studentTable').bootstrapTable("destroy");
//初始化
$('#studentTable').bootstrapTable({
classes: 'table table-bordered table-hover table-striped',
url: '/studentManage/studentAll',
method: 'get',
dataType : 'json',        // 因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
uniqueId: 'id',
idField: 'id',             // 每行的唯一标识字段
toolbar: '#toolbar',       // 工具按钮容器
clickToSelect: true,     // 是否启用点击选中行
showColumns: true,         // 是否显示所有的列
showRefresh: true,         // 是否显示刷新按钮

//showToggle: true,        // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)

pagination: true,                    // 是否显示分页
sortOrder: "asc",                    // 排序方式
queryParams: queryParam,                                   // 传递参数
sidePagination: "server",            // 分页方式：client客户端分页，server服务端分页
pageNumber: 1,                       // 初始化加载第一页，默认第一页
pageSize: 6,                        // 每页的记录行数
pageList: [10, 25, 50, 100],         // 可供选择的每页的行数
//search: true,                      // 是否显示表格搜索，此搜索是客户端搜索
//responseHandler:responseHand,//请求数据成功后，渲染表格前的方法
//showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
//exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据

columns: [{
field: 'example',
checkbox: true    // 是否显示复选框
}, {
title: '序号',//标题  可不加
align: "center",
formatter: function (value, row, index) {
return index + 1;
},
align: "center",
width: 50
},
{
field: 'id',
title: 'ID',
align: "center",
width: 200
},
{
field: 'sname',
title: '学生姓名',
align: "center"
},
{
field: 'age',
title: '年龄',
align: "center"
}]
});
return TableInit;
}


//得到查询的参数
function queryParam(params) {
var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
pageNumber: Math.round((params.offset + params.limit) / params.limit),
pageSize: params.limit,
//账号
sname: $("#sname").val()
};
return temp;
}

function  searchStudent() {
    new TableInit();
}
</script>
</body>
</html>

四、效果展示

五、扩展

其实没啥技术含量，但是也是很重要的一部分，所以写一篇博文吧，效果如果是你需要的，可以直接获取源码

代码里该有的注释都有，看一看会使用就行

直通车 SpringBoot整合BootStrap实现数据表格