Layui.Table前台分页和后端真分页

最近开发信息发布，前端就用到了layui的插件。快发结束了，用着感觉一直挺好的。最后要完成几个分页列表的时候，按照文档使用，不知道为什么分页一直有问题。这个问题让我非常的郁闷。而且网上一直找不到合适的解释。换了一种写法，竟然好了，贴出来，让大家少走弯路。仅供参考。

1⃣️--------------- js ----------------

 layui.use('table', function() {
    var table = layui.table;
    $.ajax({
        type: "get",
        url: releaseBasePath + '/selectReleaseData?typeId=' + $("#typeId").val(), // 数据接口
        async: true,
        success: function(r) {
            var obj = JSON.parse(r);
            var data = obj.data;
            table.render({
                elem: '#moreRelease',
                data: data,
                height: 515,
                cols : [ [ // 表头
                    {
                        field : 'title',
                        title : '标题',
                        sort : true,
                        align : 'left',
                        width : '41%',
                        event : 'seeDetail',
                        style: 'cursor: pointer;'
                    },{
                        field : 'releaseUserName',
                        title : '发布人',
                        width : '15%',
                        align : "center",
                        sort : true
                    }, {
                        field : 'releaseDeptName',
                        title : '发布部门',
                        width : '20%',
                        align : "center",
                        sort : true
                    }, {
                        field : 'releaseTime',
                        title : '发布时间',
                        width : '25%',
                        align : "center",
                        sort : true
                    } ] ],
                skin: 'row', //表格风格
                even: true, //隔行背景
                page: true, //是否显示分页
                limits: [5, 10, 15], //显示
                limit: 10 //每页默认显示的数量
            });
        }
    });
    
    // 监听单元格事件
    table.on('tool(detail)', function(obj) {
        var data = obj.data;
        if (obj.event === 'seeDetail') {
            window.open(releaseBasePath + "/seeRelease?id=" + data.id);
        }
    });
})

⚠️注：开发过程过发现一个问题，align和fixed不要同时使用。会出现一条很奇怪的竖线。

2⃣️--------------- controller ----------------

    @RequestMapping(value = "/selectReleaseData", method = RequestMethod.GET)
    @ResponseBody
    public String selectReleaseData(String typeId) {
        List releaseList = releaseInfoService.selectReleaseByTypeId(typeId);
        JSONObject jsonObject = new JSONObject();  
        jsonObject.put("code", 0);
        jsonObject.put("msg", "");
        jsonObject.put("count", releaseList.size());
        jsonObject.put("data", releaseList);
        return jsonObject.toString();
    }

这个返回可以根据Layui Api的格式，查询出所有的数据，返回即可。

==================================================

介意上面的这种方式进行优化，通过PageInfo封装，后台真分页。

1⃣️ js中table.render里面添加一个属性，也可以不用定义，用默认的page和limit。

request: {
    pageName: 'pageStart', //页码的参数名称，默认：page
    limitName: 'pageSize' //每页数据量的参数名，默认：limit
},

2⃣️后台的需要接受这两个分页参数。我这是在ReleaseInfoEntity实体中定义的。

@RequestMapping(value = "/selectReleaseData", method = RequestMethod.GET)
    @ResponseBody
    public String selectReleaseData(HttpServletRequest request,ReleaseInfoEntity releaseInfoEntity) throws UnsupportedEncodingException {
        String title = releaseInfoEntity.getTitle();
        //如果是IE浏览器，则用URLEncode解析  
        if(isMSBrowser(request)){  
            title = URLDecoder.decode(title, "UTF-8");  
        }
        int page = releaseInfoEntity.getPageStart();
        int limit = releaseInfoEntity.getPageSize();
        PageHelper.startPage(page, limit);
        PageInfo pageInfo = new PageInfo(releaseInfoService.selectReleaseByEntity(releaseInfoEntity));
        
        JSONObject jsonObject = new JSONObject();  
        jsonObject.put("code", 0);
        jsonObject.put("msg", "");
        jsonObject.put("count", pageInfo.getTotal());
        jsonObject.put("data", pageInfo.getList());
        return jsonObject.toString();
    }

就这样，即可实现后台的真分页，效率也会好很多。
☀️☀️☀️