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

最新推荐文章于 2025-08-06 16:45:22 发布

HelloNW

最新推荐文章于 2025-08-06 16:45:22 发布

阅读量7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： layui

本文链接：https://blog.youkuaiyun.com/pbsolvechaser/article/details/90270639

本文介绍了如何使用layui-table方法渲染并结合后端PageInfo实现真正的异步分页。通过前端form表单提交查询条件，监听表单提交事件，利用jQuery发送异步请求。后端使用DTO对象接收数据，通过controller和服务层处理查询，返回PageInfo对象。由于layui-table的格式要求，需要对返回数据进行转换，同时解决内嵌对象属性的展示问题。

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

文章目录

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