Layui 列表初始化，数据默认不显示

最新推荐文章于 2023-07-02 16:05:09 发布

HeRo_OO7

最新推荐文章于 2023-07-02 16:05:09 发布

阅读量4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Layui 文章标签： layui table

本文链接：https://blog.youkuaiyun.com/cc111cc111cc/article/details/119824310

Layui 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用layui库实现表格的初始加载，数据默认不显示，并避免数据加载异常。主要涉及表格布局和渲染配置，适合前端开发者学习layui表格组件的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Layui 列表初始化，数据默认不显示

需求：初始加载，表格呈现，数据默认不显示，且不提示数据异常。

1.布局表格控件

<br />
<table class="layui-hide" id="checkList" lay-filter="test"></table>
<br />


2.呈现方法

<script type="text/javascript">
//根据需要，自行添加use模块（如：form、table、upload ...等）
    layui.use(['layer', 'form', 'table', 'upload', 'element'], function () {
        var layer = layui.layer,
            upload = layui.upload,
            element = layui.element,
            form = layui.form;
        $ = layui.jquery;
        var table = layui.table;
        //初始加载
        startdata(table);
});

function startdata(table) {
        table.render({
            elem: '#checkList'
              , loading: true
              , height: "full-185"
              , cols: [[
                        { type: 'checkbox', fixed: 'left' }
                        , { field: 'aaa', title: '工厂', sort: true, width: 100, fixed: 'left', align: 'center' }
                        , { field: 'bbb', title: '托盘号', sort: true, width: 200, fixed: 'left', align: 'center' }
                        , { field: 'ccc', title: '批次号', width: 220, align: 'center' }
                        , { field: 'ddd', title: '数量', width: 120, align: 'center' }
                        , { field: 'eee', title: '计量单位', width: 250, align: 'center' }
                        , { field: 'fff', title: '状态', width: 100, align: 'center' }
                        
              ]]
            , page: true

        });
    }
</script>
说明：table.render中，注释掉 “url:” 数据接口路径，以免调用异常。