LayUI # 绑定数据表，接口测试成功不显示数据问题

最新推荐文章于 2023-09-12 10:38:45 发布

qq_16313575

最新推荐文章于 2023-09-12 10:38:45 发布

阅读量689

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： LAYUI

本文链接：https://blog.csdn.net/qq_16313575/article/details/103955603

前端专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个关于layui表格组件在网页中无法正确显示数据的问题，并提供了修改后的代码实现，通过引入layui的table模块成功加载了JSON数据，展示了如何在前端页面中正确使用layui表格组件。

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

编写如下代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="../layui/css/layui.css" media="all" />
    <script src="../layui/layui.js" type="text/javascript"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <table class="layui-table" lay-data="{url:'../From_JSON/AfterAssembly.json'}" lay-filter="myTable">
            <thead>
                <tr>
                    <th lay-data="{checkbox:true}"></th>
                    <th lay-data="{field:'Name',title:'姓名',align:'center'}"></th>
                    <th lay-data="{field:'Section',title:'性别',align:'center'}"></th>
                    <th lay-data="{field:'content',title:'年龄',align:'center'}"></th>
                </tr>
            </thead>
        </table>
        <button id="btnSave" class="layui-btn" type="button" runat="server">提交</button>
    </form>
</body>
</html>

接口数据：

{
  "code": 0,
  "msg": "",
  "count": 3,
  "data": [
    {
      "Name": "名称1",
      "Section": "11",
      "content": "内容1"
    },
    {
      "Name": "名称2",
      "Section": "22",
      "content": "内容2"
    },
    {
      "Name": "名称3",
      "Section": "33",
      "content": "内容3"
    }
  ]
}

测试窗口：

竟然不显示数据。

更改后代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="../layui/css/layui.css" media="all" />
    <script src="../layui/layui.js" type="text/javascript"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <table class="layui-table" lay-data="{url:'../From_JSON/AfterAssembly.json'}" lay-filter="myTable">
            <thead>
                <tr>
                    <th lay-data="{checkbox:true}"></th>
                    <th lay-data="{field:'Name',title:'姓名',align:'center'}"></th>
                    <th lay-data="{field:'Section',title:'性别',align:'center'}"></th>
                    <th lay-data="{field:'content',title:'年龄',align:'center'}"></th>
                </tr>
            </thead>
        </table>
        <button id="btnSave" class="layui-btn" type="button" runat="server">提交</button>
    </form>
    <script>
        layui.use('table', function () {
            var table = layui.table;
        });
    </script>
</body>
</html>