layui table怎么修改返回数据的字段映射格式（code/msg/count/data）-Layui教程-PHP中文网

table.set() 全局配置 response 字段映射须在首次 table.render() 前调用，仅影响后续新建表格；response 仅做字段名提取（大小写敏感、不支持嵌套路径），parseData 才是最终数据清洗入口，必须确保 count 为数字、data 为数组、code 为数值，并手动处理嵌套结构。

layui table怎么修改返回数据的字段映射格式（code/msg/count/data）

table.set() 全局配置 response 字段映射

必须在首次 table.render() 之前调用 table.set()，否则无效。它只影响之后新建的表格实例，已渲染的表格不会更新。

后端字段名和 response 配置必须完全一致（大小写敏感），比如后端返回 { status: 0, message: "", total: 100, records: [] }，就得这么写：

layui.use('table', function(){
  var table = layui.table;
  table.set({
    response: {
      statusName: 'status',
      msgName: 'message',
      countName: 'total',
      dataName: 'records'
    }
  });
});

statusName 对应状态标识，Layui 内部会把它转成 code；值为 true/false 时自动映射为 0/1
countName 必须是数字类型，字符串如 "100" 会导致分页按钮全部禁用，建议后续在 parseData 中用 +res.total 强转
dataName 只做字段名提取，不处理嵌套结构，比如后端是 { data: { list: [...] } }，dataName: 'data.list' 是无效的——Layui 不支持点号路径

parseData 函数手动转换非标准结构

当后端返回嵌套过深、字段类型不对或需要逻辑判断时，response 映射无能为力，必须写 parseData。它在 response 映射之后执行，是最终的数据清洗入口。

常见错误：漏掉 count、返回 data 为 null 或 undefined、code 写成字符串。

假设后端返回：

{
  "ok": true,
  "error_msg": "success",
  "pagination": { "total": 200 },
  "result": { "items": [ {"id": 1, "user": {"name": "张三"}} ] }
}

对应 parseData 应该这样写：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

parseData: function(res) {
  return {
    code: res.ok ? 0 : 1,
    msg: res.error_msg || '',
    count: Number(res.pagination?.total) || 0,
    data: (res.result?.items || []).map(item => ({
      id: item.id,
      name: item.user?.name || ''
    }))
  };
}

count 必须是数字，Number() 或 + 强转不可省
data 必须是数组，空数组 [] 安全，null 或 undefined 会直接报 Cannot read property 'length' of undefined
多层嵌套必须手动 map 扁平化，字段名要和列定义的 field 严格对齐

为什么改了 response 还是解析失败

因为 response 和 parseData 是两层逻辑：前者只做字段名提取，后者才真正决定最终输出结构。即使你配了 response，只要没写 parseData，Layui 仍会用内置默认函数处理提取后的结果——而这个默认函数依然要求 res.data 是数组、res.count 是数字。

典型陷阱：

后端返回 count: "200" → response 提取后仍是字符串，分页失效
后端返回 data: null → response 提取后是 null，表格空白
后端返回 { result: { list: [...] } } → response.dataName: 'result.list' 不生效，必须靠 parseData 手动解构

所以，response 是简化版适配，parseData 是兜底方案，二者常需共存。

单表覆盖全局配置的写法

全局 table.set() 设好后，个别表格仍可单独覆盖，比如某个接口结构更怪，或需要加日志、过滤、格式化：

table.render({
  elem: '#demo',
  url: '/api/list',
  parseData: function(res) {
    console.log('原始响应:', res);
    return {
      code: res.code === 200 ? 0 : 1,
      count: +res.meta?.total_count || 0,
      data: (res.payload?.items || []).map(i => ({
        ...i,
        apply_time: new Date(i.apply_time * 1000).toLocaleString()
      }))
    };
  }
});