使用bootstrap table和SpringBoot，mysql实现后台管理数据表格的后端分页

最近在做后台管理系统，在数据表格展示选择dataTable和bootstrap table上浪费了很多时间，刚开始使用dataTable，但是后面发现使用ajax异步请求填充表格数据十分复杂，于是转向了bootstrap table，bootstrap table在向后端传递分页参数上比datatable更简单明了，也更容易上手开发。首先贴出实现界面。

前端引入css，js就不赘述了，在这主要记录一下boostrap-table js书写以及后端代码的书写。要启用bootstrap-table，只需要在前端界面，添加一个table标签，然后添加data-toggle=“table”属性即可，下方是我自己添加的表格上方的搜索栏。

js文件，主要用于初始化bootstrap-table以及定义向后端传递的分页参数。 queryParams是自带就有的，当设置好了分页显示第一页，每页８条数据，当设置了url请求路径后，可以打开ｆ１２浏览器调试窗口，可以看到其实bootstrap-table默认就是发送offset偏移量（跳过的条数）和limit查询条数的，但是如果需要自定义向后台传参，就需要加上queryParams这段函数代码块。简而言之，如果只需要向后端传递offset和limit两个参数，可以省略queryParams这段函数代码块，发送的ｇｅｔ请求已经包含了offset=0＆limit=8参数。

/*bootstrap-table初始化*/
$("#user-table").bootstrapTable({
    url: "/api-staff/v1/staff/listRange",
    striped: true,//设置为 true 会有隔行变色效果
    //showToggle: "true",//是否显示 切换试图（table/card）按钮
    pagination: true,
    sidePagination: "server",
    pageNumber: 1,
    pageSize: 8,
    queryParams: function (params) { //这里的params是table提供的,传到后台
        return {
            offset:params.offset,   //跳过多少条数
            limit:params.limit      //找多少条数据
        }
    },
    responseHandler: function (result) {
        return {
            "total": result.total,   //查询出来的总数
            "rows": result.data  //数据
        }
    },
    columns: [
        {
            width: '40px',
            field: "checkAll",
            title: '<input type="checkbox" id="checkAll">',
            align: "center",
            valign: &#