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