BootStrapTable的后端分页，已完笔

楼主花了几天理清的版本，前两天版本不对博客没写完，向各位观众说声抱歉，今天写完。

父子表请开这里，父子表加号失踪之谜

1.上图，是你要的效果就来

2.css和js的依赖
楼主用的是thymeleaf模板引擎，后台用的java，各位不用这两个的把下面的th标签去掉即可，不去掉也没关系，浏览器也能正常解析路径

这里是我的index依赖，各位要用的话一起怼过去就行

	<!--bootstrap楼主用的是4.1.3的，各位一定看好版本 -->
    <link th:href="@{/css/bootstrap/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap-table/bootstrap-table-1.15.2.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/bootstrap-table/all/all-v5.6.3.css}" type="text/css">
    
    <!--js，jquery版本3.4的，楼主自己排除过版本的干扰，各位效果不同请注意版本问题，最后一个是语言包，放最后 -->
    <script th:src="@{/js/jquery.min.js}"></script>
	<script src="/js/bootstrap/tether.min.js"></script>
	<script src="/js/bootstrap/bootstrap.min.js"></script>
	<script src="/js/bootstrap-table/bootstrap-table-1.15.2.js"></script>
	<script src="/js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

页面代码

<div id="user">
    <div class="row">
        <div class="col-12">
            <h4 class="header-title mt-2">用户管理</h4>
            <button type="button" class="btn btn-primary" style="text-align: right" id="addUser">添加</button>
            <button type="button" class="btn btn-primary" style="text-align: right"id="deleteUser">删除</button>
            <table id="selection-datatable123" class="table dt-responsive nowrap">
          
      
            </table>
        </div><!-- end col-->
    </div><!-- endrow-->
</div>

3.js配置

$(function () {
    loadTable();
});
function loadTable(){
    $("#selection-datatable123").bootstrapTable({
        url : '/user/pageList', //请求后台的URL（*）
        method: 'POST',
        contentType:'application/x-www-form-urlencoded; charset=UTF-8',//post请求需设
        sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
        pagination : true, //是否显示分页（*）
        detailView: false,//这个是父子表的关键，下一篇博客重点介绍，这里先设置为false
        cache: false,//缓存
        clickToSelect: true,//点击行选中
        queryParams :function (params) {//配置请求的参数，页数和下标，看你的配置
            return {
                pageSize: params.limit,
                pageIndex: params.offset / params.limit + 1
            };
        }, 
        pageSize : 5, //每页显示的记录数
        pageNumber : 1, //当前第几页
        pageList : [ 5, 10, 25, 50 ,100 ], //记录数可选列表*/
        responseHandler: function(data){//这个也很重要，如果你的格式和要求的不对就要配置，等下上我的配置
            return {"rows":data.data.page.records,//总记录数
                "total": data.data.page.total,//总页数
            }  //约定rows
        },
        idField: 'userId',
        uniqueId : 'userId',//这两个具体的区别还没发现
        columns : [
            { field: 'check',  checkbox: true, formatter: function (value, row, index) {
                    if (row.check == true) {
                        // console.log(row.serverName);
                        //设置选中
                        return {  checked: true };
                    }
                }
            },//这个就是check框
		 {title: '姓名', field: 'username', align: 'center'},
            {title: '性别', field: 'sex', align: 'center',
                formatter: function (value, row, index) {
                    if (value === 0) return '男';
                    if (value === 1) return '女';
                    return '保密';
                }},
            {title: '邮箱', field: 'email', align: 'center'},
            {title: '电话', field: 'mobile', align: 'center'},
            {title: '状态', field: 'status', align: 'center',
                formatter: function (value, row, index) {
                    if (value == 1) {
                        return '<span class="badge badge-success">有效</span>';
                    }else{return '<span class="badge badge-warning">锁定</span>';}
                }},
            {title: '创建时间', field: 'createTime',  align: 'center'},
            {title: '修改时间', field: 'updateTime',  align: 'center'},
            { field: 'operate', title: '操作', align: 'center', events : operateEvents, formatter: 'operateFormatter' },
        ]
    });
};

window.operateEvents = {//这里做你的增删改查
    'click .userInfo ': function (e, value, row, index) {
        console.log(row.userId);
       
    },
    'click .userEdit ': function (e, value, row, index) {
        console.log(row.userId);
    },
    'click .userDelete ': function (e, value, row, index) {
       console.log(row.userId);
    }
};

//按钮的格式化
function operateFormatter(value, row, index) {
    return [
        '<button type="button" class="userInfo btn-small  btn-primary" style="margin-right:15px;"><i class="mdi mdi-account-card-details" ></i>&nbsp;详细信息</button>',
        '<button type="button" class="userEdit btn-small   btn-primary" style="margin-right:15px;"><i class="fa fa-pencil-square-o" ></i>&nbsp;修改</button>',
        '<button type="button" class="userDelete btn-small   btn-light" style="margin-right:15px;"><i class="mdi mdi-delete" ></i>&nbsp;删除</button>'
    ].join('');

}

后台请求分页接口，这里的model其实在页面并未使用，各位根据自己的情况斟酌。

  @RequestMapping(method = RequestMethod.POST, value = {"/pageList"})
    @ApiOperation(value = "根据查询条件获取分页信息")
    public ApiResult pageList(UserQuery userQuery, Model model) throws Exception {
        //验证字段
        Map<String, Object> check = checkQuery(userQuery);
        if (check != null && (Boolean) check.get("checkFlag") == false) {
            return ResultUtils.buildError(ResultUtils.PARAM_ERROR_NOT_NULL_CODE,"["  +check.get("propertie")+ "]" + ResultUtils.PARAM_ERROR_NOT_NULL_MSG);
           
        }
        //分页用的是myBatisPlus的分页，有不清楚的可以联系楼主    邮箱 2519946973@qq.com qq: 2519946973
        Page<User> page = new Page<>(userQuery.getPageIndex(), userQuery.getPageSize());
        QueryWrapper<User> wrapper = new QueryWrapper<>();
        wrapper = userService.getEntityWrapper(wrapper, userQuery);
        IPage<User> result = userService.page(page, wrapper);

        if (result.getRecords() != null && result.getRecords().size() > 0) {
            result.getRecords().stream().forEach(o -> o.setPassword(null));
            model.addAttribute("pageList",result);
            return ResultUtils.buildSucessObject("page",result);
        } else {
            return ResultUtils.buildError(ResultUtils.DATA_NOT_EXIST_CODE, ResultUtils.DATA_NOT_EXIST_MSG);
        }

    }

4.结束
到这里就结束了，台上三分钟，台下一个星期的功夫，期望对大家有所裨益！
顺便补上后台数据结构

{
	"errorCode": 0,
	"msg": "处理成功",
	"data": {
		"page": {
			"records": [ {
				"userId": 6,
				"username": "张三",
				"password": null,
				"salt": "",
				"email": "zhangsan@qq.com",
				"mobile": "13888888888",
				"status": 1,
				"createTime": "2017-12-28 01:35:14",
				"updateTime": "2018-03-27 17:21:08",
				"lastLoginTime": "2018-01-23 17:17:27",
				"sex": 1,
				"theme": "teal",
				"headImg": "default.jpg",
				"description": null
			}, {
				"userId": 23,
				"username": "李四",
				"password": null,
				"salt": "",
				"email": "lisi@qq.com",
				"mobile": "15134627380",
				"status": 1,
				"createTime": "2017-12-30 00:16:39",
				"updateTime": "2018-03-30 00:18:36",
				"lastLoginTime": "2018-03-21 01:59:04",
				"sex": 0,
				"theme": "blue-grey",
				"headImg": "default.jpg",
				"description": "我不系渣渣辉，嗯嗯"
			}, {
				"userId": 24,
				"username": "王五",
				"password": null,
				"salt": "",
				"email": "wangwu@qq.com",
				"mobile": "13364754932",
				"status": 1,
				"createTime": "2017-12-30 00:21:31",
				"updateTime": "2018-02-27 16:48:16",
				"lastLoginTime": "2018-02-27 16:48:27",
				"sex": 1,
				"theme": "teal",
				"headImg": "default.jpg",
				"description": 王五出品，必属精品
			}],
			"total": 9,
			"size": 5,
			"current": 1,
			"pages": 2
		}
	}
}

5.本文章为原创文章，转发请注明出处
邮箱：2519946973@qq.com
QQ号：2519946973
bootstrapTable的官网，里面很多组件
bootstrapTable父子表配置，加号失踪之谜，暂时没写完
ztree的相关配置，还没写完，可提前看效果

如若需要，请留言，后台的myBatisPlus的配置使用和分页笔者也能分享一二