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

简介: 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
                }
            }

表格就正确渲染成功了

目录
相关文章
|
前端开发 JavaScript
通用的layui框架系统管理后台模板
通用的layui框架系统管理后台模板
508 0
|
前端开发 JavaScript 数据库
layui联动菜单搜索select表单选项的设置方法
layui联动菜单搜索select表单选项的设置方法
1169 0
|
容器
layui下拉多选框xm-select.js插件的使用
layui下拉多选框xm-select.js插件的使用
1404 0
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
731 0
|
前端开发 JavaScript 数据安全/隐私保护
Layui之动态树(树形菜单)详解1
Layui之动态树(树形菜单)详解1
821 0
|
前端开发 JavaScript Java
前端框架Layui实现动态树效果(书籍管理系统左侧下拉列表)(二)
前端框架Layui实现动态树效果(书籍管理系统左侧下拉列表)(二)
247 0
|
前端开发 JavaScript 安全
前端框架Layui实现动态选项卡&iframe使用(附源码)
前端框架Layui实现动态选项卡&iframe使用(附源码)
2415 0
|
JavaScript 算法 前端开发
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
3431 0
|
JavaScript 前端开发
layui下拉框xm-select自定义搜索使用方法
【10月更文挑战第28天】`xm - select` 是基于 Layui 的下拉框增强插件,支持自定义搜索功能。实现步骤包括:1. 引入 Layui 和 xm - select 的核心文件;2. 创建下拉框的基本 HTML 结构;3. 使用 `layui.use` 函数初始化插件并配置搜索功能;4. 可选地进行高级自定义搜索优化,如模糊匹配、多字段搜索和实时更新数据。通过这些步骤,可实现灵活的下拉框搜索功能。
3703 1
|
JSON 前端开发 JavaScript
【Layui】掌握的LayUI树形权限菜单,助力你的权限管理!
LayUI是一款基于jQuery的前端UI框架,而树形权限菜单是一种常见的网页导航菜单设计。LayUI树形权限菜单结合了LayUI框架的特性和树状结构的展示方式,用于实现对用户权限的管理和控制。树形权限菜单通常由多层级的树状菜单构成,每个节点表示一个功能或者页面,父节点表示上级菜单,子节点表示下级菜单。通过这种层级结构,可以清晰地展示网站或系统的功能模块之间的关系。权限管理是指根据用户的角色或权限级别对不同的用户展示不同的菜单选项。