layui-table渲染不出来

最新推荐文章于 2025-03-13 15:30:13 发布

转载最新推荐文章于 2025-03-13 15:30:13 发布 · 911 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhyue93/p/layui-table-1.html

文章标签：

#javascript #ViewUI

本文详细介绍如何使用layui的表格组件渲染动态数据，包括设置表格的基本属性、配置数据接口及分页功能，并展示了具体的页面代码和JS实现方式。文章还特别强调了返回数据格式中code字段的重要性。

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

通过方法渲染

页面代码：

<table id="tableList" lay-filter="clublist"></table>

js代码：

layui.use('table', function () {
    var table = layui.table;

    //返回的数据必须是code:0
    var tableIns = table.render({
        elem: '#tableList'
      , height: 450
      , url: '/admin/Club/Club.ashx' //数据接口
      , where: { action: 'getclublistbypage' }
      , page: true //开启分页
      , limit: 10
      , cols: [[ //表头
        { field: 'ID', title: 'ID', width: 80, sort: true, fixed: 'left' }
        , { field: 'ClubName', title: '主办方名称', width: 180 }
        , { field: 'ClubIntro', title: '主办方介绍', width: 180 }
        , { field: 'ClubLogo', title: '主办方logo', width: 180 }
        , { field: 'IsDel', title: '是否可用', width: 120 }
        , { field: 'SponsorTypeID', title: '主办方类型', width: 180 }
      ]]
    });

});

然后是接口返回的数据（使用官方的默认response）

{
  code: 0,
  msg: "",
  count: 1000,
  data: []
}

要注意，其中code的值，官方是这么说的：

我理解的就是code反应的是你返回的数据是正确的还是错误的，假如不正确（不为0），那么页面会一直渲染不出来，这个要注意，这个问题搞了半天

转载于:https://www.cnblogs.com/zhyue93/p/layui-table-1.html