响应状态字段名不统一时，必须在parseData中手动映射：return {code: res.status === 0 ? 0 : 1, msg: res.message || '', count: res.total || res.count || res.data?.length || 0, data: res.list || res.records || res.items || res.data || []}。
响应状态字段名不统一时怎么映射到表格列
layui 的 table.render() 默认期望后端返回 data 和 count 字段，但实际项目中常见 list、items、records 等不同字段名。如果直接用默认配置，表格会显示“暂无数据”或报错 typeerror: cannot read property 'length' of undefined。
必须在 parseData 回调里手动提取真实数据：
parseData: function(res){
return {
"code": res.status === 0 ? 0 : 1, // Layui 要求 code=0 表示成功
"msg": res.message || "",
"count": res.total || res.count || res.data?.length || 0,
"data": res.list || res.records || res.items || res.data || []
};
}
- 不要依赖后端字段名和 Layui 约定一致；
parseData是必加项 -
code必须是数字，且仅0被识别为成功，其他值（包括"0"字符串）都会触发错误提示 - 如果后端用
status: 200表示成功，需转换为code: 0，否则表格不渲染数据
不同状态码对应不同表格内容怎么写
比如后端返回 status: 403 表示无权限、status: 404 表示资源不存在，这时不该只显示空表，而应展示定制化提示。
核心思路：不在 parseData 里硬塞假数据，而是用 done 回调结合 table.cache 和 DOM 操作动态干预：
done: function(res, curr, count){
if(res.status === 403){
$('#demo').next('.layui-table-box').html(
'<div class="layui-none">您没有查看该列表的权限</div>'
);
return;
}
if(res.status === 404){
$('#demo').next('.layui-table-box').html(
'<div class="layui-none">未找到相关数据，请检查输入条件</div>'
);
return;
}
// 正常渲染交给 Layui 自己处理
}
-
done在表格渲染完成后执行，此时 DOM 已就位，可安全操作 - 避免在
parseData中返回空数组并指望text: {none: 'xxx'}—— 这只对「有数据但为空」生效，对请求失败无效 - 注意选择器：
$('#demo').next('.layui-table-box')才是表格主体容器，直接操作#demo会覆盖表头
加载中、失败、空数据三种状态如何区分控制
Layui 表格本身只有 loading 开关和 text.none 提示，无法原生支持“请求失败”的 UI。必须组合使用 before、done 和 AJAX 错误捕获。
推荐做法：改用 table.render() 的 url 配合自定义 request 和 response：
request: {
pageName: 'page',
limitName: 'limit'
},
response: {
statusName: 'status', // 对应 res.status
statusCode: 0, // 成功的值
msgName: 'message',
dataName: 'data',
countName: 'total'
},
before: function(){
// 显示 loading 或禁用搜索按钮
},
done: function(res, curr, count){
if(res.status === 0) return;
// 根据 res.status 渲染对应提示
}
-
response只影响成功路径解析，失败仍需done处理 - 真正网络错误（如 502、超时）不会进
done，要靠全局$.ajaxSetup({error: ...})或封装请求函数拦截 - 不要把状态判断逻辑全堆在
done里——先在请求层统一处理错误，再透传语义化状态给表格
表格重载时状态提示不更新怎么办
调用 table.reload('id') 后，如果新请求返回不同状态（比如从 200 变成 403），页面可能还残留旧提示，因为 done 不会自动清空上次插入的 DOM。
每次进入 done 前，先清理上一次的手动插入内容：
done: function(res, curr, count){
// 清除可能存在的自定义提示
const box = $('#demo').next('.layui-table-box');
box.find('.layui-none').remove();
if(res.status === 403){
box.append('<div class="layui-none">权限不足</div>');
return;
}
// ... 其他状态
}
- 这个清理动作不能省，否则多次 reload 后页面可能出现多个“无权限”提示
- 如果用了自定义 class（如
.my-empty-tip），也要一并 remove，别只认.layui-none - 更稳妥的做法是：所有状态提示都用同一 class，reload 前统一清除，避免漏删
parseData 解析结构，done 处理语义，DOM 操作只做最后呈现。最容易被忽略的是 reload 时的 DOM 清理和网络错误的兜底捕获。
