layui-table方法渲染+分页+后端PageInfo实现真正异步分页

先看效果

废话不多说，先上效果。

未查询前：

查询后：

更换每页条数：

后端查询语句：

前端

基本思路：前端采用form表单提交的方式获取一些查询信息（有记录的状态qstatus，开始时间fromDate和结束时间toDate），然后通过jQuery实现表单提交时间的监控，在表单提交事件中使用table.render()根据需要查询的信息发送异步请求到后端获取记录。

form表单：

//工具栏
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="answers">回复</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
    </div>
</script>

<form class="layui-form">

    <div class="layui-form-item">
        <div class="layui-input-inline">
            <select name="qstatus">
                <option value="">请输入状态</option>
                <option value="0" selected>未回复</option>
                <option value="1">已回复</option>
            </select>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">开始时间：</label>
            <div class="layui-input-inline">
                <input type="text" name="fromDate" class="layui-input" id="test1" placeholder="yyyy-MM-dd" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">结束时间：</label>
            <div class="layui-input-inline">
                <input type="text" name="toDate" class="layui-input" id="test1-1" placeholder="yyyy-MM-dd" autocomplete="off">
            </div>
        </div>

        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn" type="button" lay-submit lay-filter="query">查询</button>
            </div>
        </div>
    </div>

</form>

表单提交监控事件

$.func = {
            formatNestedObj:function(list){
                //由于layui无法处理json中嵌套的对象，在这里将我们需要的嵌套对象的属性，变为该对象的属性，
                for (var i=0;i<list.length;i++)
                {
                    list[i].uname = list[i].user.uname;
                }
                return list;
            },  //end formatNestedObj
}

form.on('submit(query)', function(data){
            var param=data.field;//定义临时变量获取表单提交过来的数据，非json格式

            table.render({
                elem:'#test'
                ,url:'${ctx}/question/queryQuestion'
                ,method:'post'
                ,contentType:"application/json; charset=utf-8"
                ,request: {
                    pageName: 'pageNum' //页码的参数名称，默认：page
                    ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                ,where:{
                    qstatus:param.qstatus,
                    fromDate:param.fromDate,
                    toDate:param.toDate
                }
                ,parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": "", //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": $.func.formatNestedObj(res.list) //解析数据列表
                    };
                }
                ,even:true
                ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['limit', 'count', 'prev', 'page', 'next'] //自定义分页布局
                    ,groups: 3 //只显示 3 个连续页码
                    ,first: '首页' //首页
                    ,prev: '上一页'
                    ,next: '下一页'
                    ,last: '尾页' //尾页
                    ,limit:6
                    ,limits:[6,12,18]
                }
                ,cols: [[
                    {field: 'uname', title: '用户名', width:'10%'}
                    ,{field: 'qtype', title: '类型', width:'10%'}
                    ,{field: 'qdetails', title: '问题详情', width:'45%'}
                    ,{field: 'qdate', title: '添加时间', width:'15%'}
                    ,{field: 'qstatus', title: '是否回复', width: '10%'}
                    ,{fixed: 'right', title:'操作', toolbar: '#toolbarDemo', width:'10%'}
                ]]
            });
        });//end form

需要说明的几点：

• 使用request来重新设定curr和limit两个字段的名称分别为pageNum和pageSize，这样做的目的是因为我的后端采用DTO对象接收前端数据，而且保证字段的含义与PageInfo里的字段名称相同；
• 要使用table.render()来实现方法渲染和分页数据异步请求，后端的数据必须满足一定的格式，具体格式可以参见文档，但是我的后端controller直接返回PageInfo对象，和它的格式有一定的差距，所以将数据进行了一定的转换以满足该框架所要求的格式，这里为图方便，状态码与提示文本直接设置为了固定的值；
• 由于我的POJO类中采用了面向对象的方式，里面包含了另一个对象，而且该对象的属性是需要展示的，但是layui并不支持内嵌对象属性的展示，所以使用formatNestedObj()函数将内嵌对象的属性拿到外面来。

后端

DTO对象

public class QuestionQueryDTO {

    private Integer qstatus;

    @JsonFormat(pattern="yyyy-MM-dd")
    private Date fromDate;

    //解决json转换时区问题
    @JsonFormat(pattern="yyyy-MM-dd")
    private Date toDate;

    private Integer pageSize;

    private Integer pageNum;
    
    //省略的get/set方法
}

controller

@RestController
@RequestMapping("/question")
public class QuestionController {

    @Autowired
    private QuestionService questionService;

    @RequestMapping("/queryQuestion")
    public PageInfo<Question> queryQuestion(@RequestBody QuestionQueryDTO questionQueryDTO){

        PageInfo<Question> pageInfo = questionService.queryQuestion(questionQueryDTO);

        return pageInfo;
    }
}

service

@Service("questionService")
public class QuestionServiceImpl implements QuestionService {

    @Autowired
    private QuestionMapper questionMapper;

    @Override
    public PageInfo<Question> queryQuestion(QuestionQueryDTO questionQueryDTO) {

        PageHelper.startPage(questionQueryDTO.getPageNum(),questionQueryDTO.getPageSize());

        List<Question> l = questionMapper.queryQuestion(questionQueryDTO);

        PageInfo<Question> page = new PageInfo<>(l);

        return page;
    }
}