layui后台返回数据成功,表格渲染失败问题

今天使用layui在前段渲染表格时,发现后台成功返回了json数据,在控制台也可以看到返回数据的详情,但是页面表格中并没有显示数据。效果如下图:

刚开始以为是前端页面写错了,然后仔细检查了页面发现并没有问题,但是数据就是显示不出来。

后面通过在页面构造data发现可以显示,然后确定了问题在后台返回的数据。

通过仔细的比较,最后发现,如果后台返回的数据中有length字段,且值为0的话,页面无法显示该条数据。

不知道原理是啥,再此做以记录。因为我页面不会显示length的值,所以直接从json数据中排除掉length就行。后台不返回值为0的length,页面数据渲染正常。

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好,关于 layui 数据表格的请求传参,一般可以通过以下两种方式实现: 1. 在前端页面的 JS 代码中,使用 Ajax 请求获取数据,并将请求参数作为数据传递到后台接口,后台接口根据参数进行数据查询和处理,并返回结果给前端页面进行显示。 2. 在 layui 数据表格的配置项中,配置接口 URL 和请求参数,当数据表格需要获取数据时,会自动向后台接口发送请求,并将请求参数作为参数传递到后台接口,后台接口根据参数进行数据查询和处理,并返回结果给 layui 数据表格进行显示。 对于第一种方式,可以参考以下代码: ```javascript // 前端 JS 代码 layui.use('table', function(){ var table = layui.table; // 监听搜索按钮的点击事件 $('#searchBtn').click(function(){ // 获取搜索框的值 var keyword = $('#keyword').val(); // 发送 Ajax 请求获取数据 $.ajax({ url: '/api/tableData', type: 'GET', data: { keyword: keyword }, success: function(res){ // 将数据绑定到 layui 数据表格中 table.render({ elem: '#data-table', data: res.data // 其他配置项 }); } }); }); }); // 后台接口代码 app.get('/api/tableData', function(req, res){ // 获取请求参数 var keyword = req.query.keyword; // 根据参数查询数据 var data = getDataByKeyword(keyword); // 返回数据给前端页面 res.json({ code: 0, msg: '', data: data }); }); ``` 对于第二种方式,可以参考以下代码: ```javascript // 前端 JS 代码 layui.use('table', function(){ var table = layui.table; // 渲染 layui 数据表格 table.render({ elem: '#data-table', url: '/api/tableData', where: { keyword: '' } // 其他配置项 }); // 监听搜索按钮的点击事件 $('#searchBtn').click(function(){ // 获取搜索框的值 var keyword = $('#keyword').val(); // 设置请求参数 table.reload('data-table', { where: { keyword: keyword } }); }); }); // 后台接口代码 app.get('/api/tableData', function(req, res){ // 获取请求参数 var keyword = req.query.keyword; // 根据参数查询数据 var data = getDataByKeyword(keyword); // 返回数据layui 数据表格 res.json({ code: 0, msg: '', count: data.length, data: data }); }); ``` 以上代码仅供参考,具体实现方式可以根据项目需求进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值