Layui table如何处理接口返回的列表数据为空的情况

云辰大大_1792

云辰大大_1792

2026-07-17

780人浏览

原创

空数组不显示“暂无数据”是因为Layui table仅在parseData返回data为空数组且count为0时触发提示;若response.dataName配置错误、parseData未返回完整四字段、done回调破坏空状态判断或自定义文案未走done处理,均会导致空白无提示。

为什么空数组不显示“暂无数据”

layui table 只有在 parsedata 返回的 data 是空数组([])且 count 为 0 时,才触发默认提示;如果后端返回 {"data":[]},但你没配 response.dataname: 'data',layui 就读不到这个数组,res.data 是 undefined,直接卡住——既不报错也不提示。

常见表现:表格区域空白、加载动画一直转、控制台无报错但 done 回调里 res.data 是 undefined 或 null。

  • 打开 Network 面板,确认响应体中真实的数据字段名(比如是 list、items 还是 data)
  • 检查 response.dataName 是否与之完全一致,大小写敏感
  • 若结构嵌套(如 {"result":{"rows":[]}}),别硬调 response,改用 parseData

parseData 必须返回完整四字段对象

parseData 不是“增强解析”,而是接管整个响应结构转换。它必须返回含 code、msg、count、data 的对象,缺一个,“暂无数据”逻辑就失效。

例如后端返回 {"code":200,"message":"ok","list":[],"total":0},要这样写:

parseData: function(res) {
  return {
    code: res.code === 200 ? 0 : res.code,
    msg: res.message || '',
    count: res.total || 0,
    data: res.list || []
  };
}
  • count 必须是数字,不能是 undefined 或字符串 "0"
  • data 必须是数组,哪怕为空 —— [] 和 null 效果完全不同
  • 别在 parseData 里做数据清洗(如把 null 换成 '-'),那是 templet 的事

done 回调里别破坏空状态判断逻辑

done 是最后干预点,但也是最容易踩坑的地方:手动清空 tbody、重写容器 HTML、或调用 table.reload() 时不传全参数,都会让 Layui 丢失对空数据的感知。

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

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

下载

调试时加一句:console.log('done:', res.data, res.count),确保输出是 [] 和 0。

  • 避免在 done 里执行 $(elem).html('') 或 $('.layui-table-body').empty()
  • 如果要用 table.reload(),每次都要带 url、where、page,否则可能复用旧缓存
  • 想插“去添加”按钮?在 done 里操作 $(this.elem).next('.layui-table-box') .find('.layui-table-body'),用 .append() 插入带 layui-table-empty class 的 div

自定义文案或按钮必须走 done,text.none 不生效

text: { none: 'xxx' } 对 table 模块完全无效——这是 Layui 文档没写清楚的坑,该配置只在 laydate、form 等组件中起作用。

所有定制化空状态(文字、按钮、图标、重试逻辑)都得在 done 回调里手动处理,且要配合 CSS 保证可见性:

  • 容器需有足够高度,.layui-table-box 不能被 overflow: hidden 截断
  • 插入的 DOM 要带 layui-table-empty class,否则样式不生效
  • 按钮点击事件必须用事件委托(如 $(document).on('click', '.reload-btn', ...)),因为 tbody 可能被重绘

真正起作用的永远是 done + parseData + 真实的空数组和零计数,三者缺一不可。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

2023.10.19

3088

3

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

2025.10.17

4549

12

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2025.12.29

3729

9

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

2026.01.19

406

15

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

2026.09.30

80

10

LLVM RISC-V参数配置教程
LLVM RISC-V参数配置教程

本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。

2026.09.30

80

14

LLVM IR中间表示入门指南
LLVM IR中间表示入门指南

本专题整理LLVM IR的核心概念,包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法,帮助新手理解LLVM编译流程中的关键层。

2026.09.30

80

12

PDF转图片方法
PDF转图片方法

需要把 PDF 页面用于上传、预览、分享或图片归档时,PDF 转图片方法专题整理 JPG/PNG 格式选择、逐页导出、清晰度设置、批量下载和结果检查等流程,帮助用户稳定完成 PDF 图片化处理。

2026.09.30

60

26

PixTV AI视频生成与无限画布创作
PixTV AI视频生成与无限画布创作

PixTV专题整理AI视频与视觉内容创作相关功能使用教程,涵盖AI生图、视频生成、无限画布、多模型创作、素材管理、声音音乐及视频剪辑等功能,帮助用户快速掌握PixTV从创意到成片的完整制作方法。

2026.09.29

60

15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.7万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 10.9万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习