使用LayUI显示有分页的数据列表

最新推荐文章于 2022-05-14 15:35:19 发布

等茶凉。

最新推荐文章于 2022-05-14 15:35:19 发布

阅读量981

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43593214/article/details/103771251

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用LayUI显示有分页的数据列表

后端使用的分页列表，数据来源接口返回的JSON数据
表格内容包括头工具栏，行工具栏，分页，排序，序号，多选（？）

HTML代码

<div class="layui-card-body">
    <table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
    <script type="text/html" id="test-table-toolbar-toolbarDemo">
        <div class="layui-btn-container">
            <a class="layui-btn layuiadmin-btn-list layui-btn-primary layui-btn-sm" lay-event="0">全部</a>
            <a class="layui-btn layuiadmin-btn-list layui-btn-primary layui-btn-sm" lay-event="1">已上线</a>
        </div>
    </script>
    <script type="text/html" id="zizeng">
        {{d.LAY_TABLE_INDEX+1}}
    </script>
    <script type="text/html" id="AddUser">
        {{d.AddUser==null?'':d.AddUser.Desc==null?'':d.AddUser.Desc}}
    </script>
    <script type="text/html" id="table-content-list">
        <a href="#/gonglve/fabu/fabu-add/id={{d.Id}}" class="layui-btn layui-btn-primary layui-btn-xs">修改</a>
        <a lay-event="del" class="layui-btn layui-btn-primary layui-btn-xs">删除</a>
    </script>
</div>

JS 表格代码

//table实例
table.render({
    elem: '#LAY-app-content-list' //table定义的id
    ,url: layui.setter.baseURI + '/xx/xx' //数据接口
    ,toolbar: '#test-table-toolbar-toolbarDemo'//头工具栏id
    ,cols: [[  //表头
        {title: '序',  width: 50, templet: '#zizeng', type: 'numbers'}//序号列（1-N）
        ,{field: 'Title', title: '文章标题'} //表头字段
        ,{title: '添加人',  width: 100, templet: '#AddUser'}//页面处理
        ,{field: 'NewsStatusDesc',title: '审核状态', width: 120, align: 'center',sort:true}//sort 排序
        ,{title: '操作', width: 180, align: 'center', toolbar: '#table-content-list'}//行工具栏id
    ]]
    ,parseData:  function(res){ //res 即为原始返回的数据
        return {
            "code": res.code,//返回的data数据
            "count": res.data.Count,//总条数
            "data": res.data.List, //解析数据列表
            "msg": res.msg 
        };
    }
    ,where: {
        CaoZuoQuanXian: value//默认传值（搜索用）
    }
    ,request: {
        limitName: 'PageSize' //每页数据量的参数名，默认：limit
    }
    ,page: true //开启分页 
    ,limit: 10 //默认每页数量
    ,limits: [10, 50, 100] //可选
    ,text: {
        none: '暂无相关数据'
    }
});

JS排序

// 排序
table.on('sort(LAY-app-content-list)', function(obj){
    table.reload('LAY-app-content-list', {
        initSort: obj
        ,where: {
            orderBy: obj.field //排序所传参数
            ,orderByDesc: obj.type === 'desc' ? 1 : obj.type === 'asc' ? 0 : ''
        }
        ,page: {
            curr: 1
        }
    });
});

行工具栏事件


table.on('tool(LAY-app-content-list)', function(obj){
    var data = obj.data;
    if(obj.event === 'del'){
        layer.confirm('确定要删除此文章吗', function(index){
            admin.req({
                url: layui.setter.baseURI + '/ERP/PC_XinXi_XinXi/DeleteForXinXi'
                ,method: 'post'
                ,contentType: 'application/json;charset=utf-8'
                ,accepts: 'application/json, text/plain, */*'
                ,data: JSON.stringify({Id: data.Id})
                ,done: function(res){
                    layer.msg('操作成功',{icon:1},function(){
                        table.reload('LAY-app-content-list');
                        layer.close(index);
                    })
                }
            });
        });
    }
});

监听头工具栏事件

table.on('toolbar(LAY-app-content-list)', function (data) {
    if (data.event < 10) {
        table.reload('LAY-app-content-list', {
            where: {
                mode: data.event
            },
            page: {
                curr: 1
            }
        })
    }
});