layui分页返回的数据不是code0怎么办

陌晨小哥_6270

陌晨小哥_6270

2026-08-07

233人浏览

原创

layui表格只认code===0为成功,其他值均触发error回调并停止渲染;必须用parsedata将后端任意code映射为0或1,并确保count为数字、data为数组,否则分页失效或显示“暂无数据”。

layui分页返回的数据不是code0怎么办

后端返回 code 不是 0,Layui 表格直接报错不渲染

Layui 表格只认 code === 0 为成功,其他值(哪怕 code === 200 或 code === 1)都会触发 error 回调、停止渲染、显示“数据接口请求异常”。这不是 bug,是硬性约定。

常见场景:Spring Boot 默认用 code: 200 表示 HTTP 成功;Go/gin 或 .NET 返回 status: 1;前端对接多个系统时各有一套状态码体系。

  • 别改后端——尤其已有联调系统或第三方 API,强行统一 code=0 可能破坏原有契约
  • 必须用 parseData 做状态映射,把任意后端 code 转成 Layui 要的 code: 0 或 code: 1
  • parseData 是唯一可靠出口,response 配置无法处理 code 映射

示例(后端返回 { "status": 200, "msg": "ok", "total": 42, "list": [...] }):

parseData: function(res) {
  return {
    code: res.status === 200 ? 0 : 1,  // 关键:转成 Layui 认的 0/1
    msg: res.msg || '',
    count: res.total || 0,
    data: res.list || []
  };
}

parseData 里 count 或 data 提取错,分页栏消失

即使 code 对了,count 缺失或 data 不是数组,分页控件照样不出现——它连“第 1 页 / 共 0 页”都不会渲染。

典型错误:

  • 后端字段叫 totalCount,你写 count: res.totalCount,但 res 里实际是 { result: { totalCount: 100 } },结果 res.totalCount === undefined
  • data 字段嵌套两层:res.data.items,但你直接写 data: res.data,导致 data 是对象而非数组
  • 忘了加空值 fallback:data: res.list || [] 没写,当 res.list 为 null 时,data 变成 null,Layui 拒绝渲染

安全写法(带防御):

parseData: function(res) {
  return {
    code: res.code ?? res.status ?? 0 === 0 ? 0 : 1,
    msg: res.message || res.msg || '',
    count: res.totalCount || res.total || res.count || res.data?.length || 0,
    data: Array.isArray(res.list) ? res.list : 
          Array.isArray(res.data?.items) ? res.data.items : 
          Array.isArray(res.data) ? res.data : []
  };
}

分页参数传错,后端收不到 pageNum/pageSize

开启分页后,Layui 默认发 page 和 limit 参数。如果你后端要的是 pageNum 和 pageSize,但没配 request,请求里就永远没有这两个字段——后端只能查全量。

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

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

下载

注意点:

  • request 必须和后端 Controller 参数名完全一致,包括大小写:pageNum ≠ pagenum
  • Spring Boot 的 @RequestParam Integer pageNum 必须匹配前端传的 key,否则参数为 null
  • MyBatis-Plus 的 IPage 构造器默认也只认 current 和 size,不是 page/limit

配置示例:

request: {
  pageName: 'pageNum',   // 后端 @RequestParam String pageNum
  limitName: 'pageSize'  // 后端 @RequestParam String pageSize
}

done 回调里误操作导致“暂无数据”不显示

空数据时本该显示“暂无数据”,但你写了 done 回调却手动清空了表格容器,或者重写了 tbody,Layui 就再也检测不到空状态。

真正该做的事只有两件:

  • 用 console.log(res) 确认 res.data 确实是 []、res.count 确实是 0
  • 检查容器是否被 CSS 截断:layui-table-box 高度不能为 0,overflow: hidden 会藏掉提示文字

别在 done 里做这些事:

  • $('#myTable').html('')
  • layui.table.cache['myTable'] = []
  • 调用 table.reload() 却漏传 where 或 page,导致缓存未更新

如果真要干预 DOM,等 Layui 渲染完再用 setTimeout(() => { ... }, 0) 延迟执行,避开内部状态判断时机。

相关文章

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

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

下载

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

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2543

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5483

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6510

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6138

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

863

5

json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

2135

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

3242

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

1096

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

3699

7

热门下载

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

精品课程

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

共87课时 | 12.9万人学习

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

共89课时 | 11.1万人学习

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

共5课时 | 1.6万人学习