SpringBoot---Mybatis分页（后端分页使用pageHelper插件、前端分页使用Bootstrap-table）

后端分页

1、在pom.xml文件添加pageHelper的依赖。

<dependency>
     <groupId>com.github.pagehelper</groupId>
     <artifactId>pagehelper-spring-boot-starter</artifactId>
     <version>1.2.5</version>
</dependency>

2、pagehelper的使用，其实就两步

PageHelper.startPage(第几页,页大小,排序的字段+空格+排序关键字); //第三分参数可有可无（查看源码即可知道）

PageInfo<某实体类> pageInfo=new PageInfo<>(对应实体类的列表);

eg:
@Override
    public PageInfo<User> pageUserList(int pageNum, int size) {
        String orderBy="username desc";
        PageHelper.startPage(pageNum,size,orderBy);
        List<User> list=userMapper.list();
        PageInfo<User> pageInfo=new PageInfo<>(list); return pageInfo;
    }

 

前端表格分页

Bootstrap-table是一个基于jquery的表格组件，功能丰富，中文参考网址为

https://www.bootstrap-table.com.cn/examples/welcome/index/， 英文参考网址https://bootstrap-table.com/，其中英文网址资料更齐全。

1、引入样式和js文件

<!--    引入相关css文件-->
    <link href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css"
          rel="stylesheet">
    <link rel="stylesheet"
          href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

<!--    引入相关js文件-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="resources/bootstrap-table-1.16/bootstrap-table.min.js"></script>

2、bootstrap-table的使用

<!--用户表-->
<table id="userTable" lay-filter="table"></table>

<script>//将返回的json数据调整为表格所需的数据格式, bootstrap table渲染数据格式{total:xx,rows:[]}
    // res为服务器返回的数据
    function responseHandler(res) {
        console.log(res);
        var datas=[];
        datas.push({total:res.data.total,rows:res.data.list});
        return datas[0];
    }

    //动态生成操作区域的的按钮
    // row.id为每行数据的主键
    //操作
    function opFormatter(value, row, index) {
        var actions=[];
        actions.push('<a class="btn btn-primary btn-sm" href="javascript:void(0)" data-toggle="modal" data-target="#editModal" onclick="edit(\''+row.userId+'\')"><i class="fa fa-edit"></i> 编辑</a> ');
        actions.push('<a class="btn btn-danger btn-sm" href="javascript:void(0)" data-toggle="modal" data-target="#deleteModal"  onclick="deleteId(\''+row.userId+'\')"><i class="fa fa-remove"></i> 删除</a> ');
        actions.push('<a class="btn btn-success btn-sm" href="javascript:void(0)" data-toggle="modal" data-target="#addAuthorityModal"  onclick="addAuthority(\''+row.userId+'\')"><i class="fa fa-adn"></i> 添加权限</a> ');
        actions.push('<a class="btn btn-warning btn-sm" href="javascript:void(0)" data-toggle="modal" data-target="#deleteAuthorityModal"  onclick="deleteAuthority(\''+row.userId+'\')"><i class="fa fa-remove"></i> 删除权限</a> ');
        return actions.join('');
    }

    //定义表格列与json数据字段的对应关系
    var columns = [
        {
            checkbox:true
        }, {
            title:"序号",
            formatter:function (value,row,index) {
                return index+1;
            }
        }, {
            field:"username",
            title:"用户名",
            sortables:true
        }, {
            field:"password",
            title:"密码",
            sortables:true,
            formatter: function (value, row, index) { //格式化输出
                return (row.password).substring(0,8)+"...";
             }
        }, {
            field:"email",
            title:"邮箱",
            sortables:true
        }, {
            field:"introduction",
            title:"介绍",
            sortables:true
        }, {
            field:"registerdate",
            title:"创建时间",
            sortables:true
        }, {
            field:"authorityList",
            title:"权限",
            sortables:true,
            formatter: function (value, row, index) { //格式化输出
                var html="";
                for(var i=0;i<row.authorityList.length;i++){
                    html+="<button class='btn-info'disabled='disabled'style='padding: 1px; margin-right: 2px;margin-top:1px;border:none;'> "+row.authorityList[i].authority+" </button>";
                }
                return html;
            }
        }, {
            field:"status",
            title:"状态",
            sortables:true,
            formatter: function (value, row, index) { //格式化输出
                if(row.status==1){
                    return"<button class='btn-success'disabled='disabled'style='padding:3px; border:none;'>已激活</button>";
                }else{
                    return"<button class='btn-secondary'disabled='disabled'style='padding:3px; border:none;'>未激活</button>";
                }
            }
        }, {
            title:"操作",
            align:"center",
            formatter:opFormatter
        }
    ];

    //和后台交互的查询参数对象
    function queryParams(params) {
        var params = {
            pageSize: params.limit,                         //页面大小
            pageNum: (params.offset / params.limit) + 1,   //页码
            orderColumn: params.sort,        //排序列名
            sortOrder: params.order,    //排序命令（desc，asc）
            username:$("#queryuserName").val(),
            email:$("#queryEmail").val(),
            authorityId:$("#queryAuthority option:selected").val()
        };
        params['keyword'] = "test";  // 传入查询分页中的关键词或者查询对象
        console.log(params);
        return params;
    }

    //获取table对象
    var table = $('#userTable');
    function onloadTable(){
        var prefix = "";
        //定义表格的相关属性
        var options = {
            //  locale: $('#locale').val(),
            height: 500,    //表格高度
            pagination: true,  // 启动分页
            sortable: true,   //启动排序
            pageList: "[5,10, 20, 50, All]",  //每页显示的数量
            pageSize: 10,    //默认每页的记录数
            striped: true,   //间隔显示颜色
            url: prefix+"/backstage/user/queryUserByMap",
            responseHandler: responseHandler,  //处理服务器返回的数据格式
            sidePagination: 'server',  //服务器分页则修改为server
            clickToSelect: true,     //单击行进行选择
           // multipleSelectRow: true,   //允许多选
            pageNumber: 1,            //默认页面为第一页
            queryParams: queryParams,  //与服务器交互的查询参数
            theadClasses: 'thead-light', //设置表头样式，thead-light,thead-dark,''
            columns: columns           //设置每列的字段内容
        }
        table.bootstrapTable('destroy').bootstrapTable(options);
        //$('#table').init(options);//初始化表格
    }

    $(function () {
        onloadTable();
    });

    //刷新
    function Refresh(){
        onloadTable();
    }

    //编辑按钮
    function edit(id) {
        $.ajax({
            type:'get',
            url:'/backstage/user/viewUserById/'+id,
            contentType:'application/json',
            processData:false,
            success:function (res) {
                console.log(res.data);
                var user=res.data;
                $("#editId").val(user.userId);
                $("#edituserName").val(user.username);
                $("#editPassword").val(user.password);
                $("#editEmail").val(user.email);
                $("#editIntroduction").val(user.introduction);
                if(user.status==1){
                    $("input[value='1']").attr('checked','true');
                }else{
                    $("input[value='0']").attr('checked','true');
                }
            }
        });
    }

</script>

3、返回的json数据格式

4、效果图

 

文档12：（如有需要，留言问我要）

源码：

链接：https://pan.baidu.com/s/1SmtMula_yR_W_TeQl7tc5Q
提取码：ezfj