springBoot mybatis mysql pagehelper layui 分頁

<!-- 加入 pagehelper 分頁插件 jar包-->
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.2.5</version>
</dependency>


在 application.properties 加上

#開啟分頁
# 指定數據庫
pagehelper.helperDialect=mysql
# 需要啟用 不然會報空數據的
pagehelper.reasonable=true
# 默認值false，分頁插件會從查詢方法的參數值中
pagehelper.supportMethodsArguments=true
# 用於從對象中根據屬性名取值
pagehelper.params=count=countSql


接收 前端傳過來的 頁碼 和 條數

 

 java 后台 代碼如下：

@RequestMapping("admin/queryAdminInfoAll")
public ResultFormatPaging queryAdminInfoAll(@RequestParam("page") Integer page, @RequestParam("limit") Integer limit) {
    /**
     * 加入 頁碼 條數 需要寫在 adminEntityList 數據的前面
     */
    PageHelper.startPage(page, limit);
    List<AdminEntity> adminEntityList = adminService.queryAdminInfoAll(map);

    logger.info("admin控制器打印 adminEntityList = {}", adminEntityList);

    /**
     * 加入數據 自動分頁
     */
    PageInfo pageInfo = new PageInfo(adminEntityList);

    /**
     * 總條數
     */
    Integer count = Math.toIntExact(pageInfo.getTotal());

    /**
     * 返回數據
     * code 為 0
     * count 數據的總條數
     * pageInfo.getList() 分頁 之后的格式
     */
    return ResultPagingUtil.pagingSuccess(0, count, pageInfo.getList());
}

# 前端 layui 分頁 瀏覽器打印的數據結構 由於 是數據包含着數據 我采用layui 提供的 templet 模板

 {
    field: 'adminInfoEntity', title: '手機號碼', sort: true,
    templet: function (data) {
        return '<span>' + data.adminInfoEntity.adminInfoPhone + '</span>'
    }
}

layui js 代碼：

 

 

 

 

table.render({
    elem: '#adminInfoList'
    , url: '/admin/queryAdminInfoAll'
    , cols: [[
        {type: 'checkbox', fixed: 'left'},
        {
            field: 'adminInfoEntity', title: '頭像',
            templet: function (data) {
                return '<img class="layui-circle adminImage" width="26" height="26" src=../../' + data.adminInfoEntity.adminInfoImage + '>'
            }
        }
        , {field: 'adminAccount', title: '登錄名'}
        , {
            field: 'adminInfoEntity', title: '郵箱', sort: true,
            templet: function (data) {
                return '<span>' + data.adminInfoEntity.adminInfoEmail + '</span>'
            }
        }
        , {
            field: 'adminInfoEntity', title: '權限',
            templet: function (data) {
                if (data.adminInfoEntity.adminInfoClass == 0) {
                    return '<span>' + "普通管理員" + '</span>'
                }
                if (data.adminInfoEntity.adminInfoClass == 1) {
                    return '<span>' + "超級管理員" + '</span>'
                }

            }
        }
        , {
            field: 'adminInfoName', title: '實名',
            templet: function (data) {
                return '<span>' + data.adminInfoEntity.adminInfoName + '</span>'
            }
        }
        , {
            field: 'adminInfoEntity', title: '狀態', width: 85, templet: function (data) {
                if (data.adminInfoEntity.adminInfoCode == 1) {

                    return '<div> <input type="checkbox" checked="" name="codeSwitch" lay-skin="switch" id="open" lay-filter="switchTest" switchId=' + data.adminInfoEntity.adminInfoId + '' +
                        ' lay-text="啟用|禁用"  value=' + data.adminInfoEntity.adminInfoCode + '></div>'
                } else {
                    return '<div> <input type="checkbox" lay-skin="switch" name="codeSwitch"  switchId=' + data.adminInfoEntity.adminInfoId + ' lay-filter="switchTest"' +
                        'lay-text="啟用|禁用" value=' + data.adminInfoEntity.adminInfoCode + '></div>'
                }
            }
        }
        , {
            field: 'adminInfoEntity', title: '性別',
            templet: function (data) {
                if (data.adminInfoEntity.adminInfoSex == 2) {
                    return '<span>' + '男' + '</span>'
                }
                if (data.adminInfoEntity.adminInfoSex == 0) {
                    return '<span>' + '保密' + '</span>'
                }
                if (data.adminInfoEntity.adminInfoSex == 1) {
                    return '<span>' + '女' + '</span>'
                }

            }
        }
        , {
            field: 'adminInfoEntity', title: '手機號碼', sort: true,
            templet: function (data) {
                return '<span>' + data.adminInfoEntity.adminInfoPhone + '</span>'
            }
        }
        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 140}
    ]]
    , limit: 15
    , limits: [15, 20, 25, 50, 100]
    , parseData: function (data) {
        /**
         * 打印數據
         *
         */
        console.log(data)
    }
    /**
     * 開啟分頁
     */
    , page: true
});

 html　代碼：

 

 

 

<table class="layui-hide" id="adminInfoList"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" title="修改管理員信息"> <i class="layui-icon">&#xe642;</i></a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" title="刪除管理員"> <i class="layui-icon">&#xe640;</i></a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="queryLog" title="查看管理員日志"> <i class="layui-icon">&#xe68d;</i></a>
</script>

如問題請留言 感謝觀看