Layui中table数据表格使用方法渲染 返回的数据不符合规范,正确的成功状态码应为:“code“: 0异常处理

一、异常错误

返回的数据不符合规范,正确的成功状态码应为:“code”: 0异常处理
在这里插入图片描述

二、原因

根据官方文档描述

异步数据参数中,数据格式解析的回调函数,用于将返回的任意数据格式解析成 table 组件规定的数据格式。table 组件默认规定的数据格式为

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

很多时候,接口返回的数据格式并不一定都符合 table 默认规定的格式,比如

{
  "status": 0,
  "message": "", 
  "total": 180, 
  "data": {
    "item": [{}, {}]
  }
}

那么你需要借助 parseData 回调函数将其解析成 table 组件所规定的数据格式。

table.render({
  elem: '#demp'
  ,url: ''
  ,parseData: function(res){ //res 即为原始返回的数据
    return {
      "code": res.status, //解析接口状态
      "msg": res.message, //解析提示文本
      "count": res.total, //解析数据长度
      "data": res.data.item //解析数据列表
    };
  }
  //,…… //其他参数
});             

也就是说,我们的数据格式不对,"code": 0没有达到,需要使用 parseData设置一下

三、解决方法

在table.render渲染函数中规定数据解析格式

        ,parseData:function (res){
                console.log(res);
                return{
                    "code":0,
                    "msg":"",
                    "count":1000,
                    "data":res
                }
            }

在这里插入图片描述

表格就正确渲染成功了

在这里插入图片描述

  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
layui table ,需要使用接口返回数据进行渲染表格。具体步骤如下: 1. 定义表格的列属性,包括标题、字段名、宽度等信息。 2. 使用 layuitable 模块初始化表格,并将列属性传递给它。 ```javascript layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo', url: '/api/table', cols: [[ //表头 {field: 'id', title: 'ID', width:80}, {field: 'username', title: '用户名', width:120}, {field: 'email', title: '邮箱', width:150}, {field: 'sex', title: '性别', width:80}, {field: 'city', title: '城市'}, {field: 'sign', title: '签名'}, {field: 'experience', title: '积分', sort: true}, {field: 'score', title: '评分', sort: true}, {field: 'classify', title: '职业'}, {field: 'wealth', title: '财富', sort: true}, {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} ]] }); }); ``` 3. 在接口请求成功后,将返回数据传递给表格进行渲染。 ```javascript layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo', url: '/api/table', cols: [[ //表头 {field: 'id', title: 'ID', width:80}, {field: 'username', title: '用户名', width:120}, {field: 'email', title: '邮箱', width:150}, {field: 'sex', title: '性别', width:80}, {field: 'city', title: '城市'}, {field: 'sign', title: '签名'}, {field: 'experience', title: '积分', sort: true}, {field: 'score', title: '评分', sort: true}, {field: 'classify', title: '职业'}, {field: 'wealth', title: '财富', sort: true}, {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} ]], done: function(res, curr, count){ // 成功请求后的回调函数 // res 是接口返回数据 // curr 是当前页码 // count 是数据总数 // 通过 res.data 获取表格数据 // 通过 res.code 判断请求状态,一般情况下 0 表示成功 } }); }); ``` 4. 在接口请求失败时,可以使用 `table.reload()` 方法重新加载表格。 ```javascript layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo', url: '/api/table', cols: [[ //表头 {field: 'id', title: 'ID', width:80}, {field: 'username', title: '用户名', width:120}, {field: 'email', title: '邮箱', width:150}, {field: 'sex', title: '性别', width:80}, {field: 'city', title: '城市'}, {field: 'sign', title: '签名'}, {field: 'experience', title: '积分', sort: true}, {field: 'score', title: '评分', sort: true}, {field: 'classify', title: '职业'}, {field: 'wealth', title: '财富', sort: true}, {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} ]], done: function(res, curr, count){ if (res.code !== 0) { // 请求失败,重新加载表格 table.reload('demo'); } } }); }); ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Yeats_Liao

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值