Layui 表格渲染

                                                                                   Layui 表格渲染

1、table 数据表格文档 - layui.table

2、相关代码

<!-- HTML -->
<!-- 表格载体 -->
<div class="layui-form layui-card-header">
    <div class="layui-inline">
        <button class="layui-btn" lay-submit lay-filter="LAY-table-search">
            <i class="layui-icon layui-icon-search"></i>
        </button>
    </div>
 </div>
<table id="table-id" lay-filter="LAY-table"></table>

//JS
layui.use(['table', 'form'], function () {
    let table = layui.table,
        form = layui.form;         //表格

    let tableObj = table.render({
        elem: '#table-id',   //表ID
        url: '/.../.../...',    //数据来源路径
        cols: [[
            {field: 'date', align:'center',title: '日期'},
            {field: 'come_in', title: '收入'},
            {field: 'come_out', title: '支出'}
        ]],
        text: { //自定义文本，如空数据时的异常提示等。
            none: '暂无数据！'
        },
        where:{'target_date':'2020-02'},//查询条件
        page: false, //关闭分页
        parseData: function(res) {  //res 即为原始返回的数据
            return {
                code: res.code,
                msg: res.msg,
                count: res.data.count,
                data: res.data.data
            }
        },
        done(res, curr, count){ //数据渲染完的回调
            //如果是异步请求数据方式，res即为你接口返回的信息。
            //如果是直接赋值的方式，
            //res即为：{data: [], count: 99} data为当前页数据、count为数据总长度

            //curr:当前页码
            //count:得到数据总量
        }
    });

    //监听搜索按钮
    form.on('submit(LAY-table-search)', function(data){
        let field = data.field;

        //执行重载
        table.reload('LAY-table', { //通用渲染方式
            where: field,   //搜索的参数
            page: {curr: 1} //重新从第 1 页开始
        });
        //或
        tableObj.reload({   //方法级渲染
            where: field,   //搜索的参数
            page: {curr: 1} //重新从第 1 页开始
        });
    });

});