0

0

Layui表格怎么清空已经渲染的数据

煙雲

煙雲

发布时间:2026-03-18 15:47:03

|

385人浏览过

|

来源于php中文网

原创

layui table.reload() 不清空表格而是重新请求数据;真清空需用 table.render() 传空 data 并设 url: null,保留原配置,page 需设 total: 0,已有实例须 clearCache 后重 render 且 id 一致。

layui table.reload() 会重新请求数据,不是清空

很多人以为 table.reload() 能清空表格,其实它只是重新执行一次渲染逻辑——如果 urldata 还在,就会再拉一遍旧数据。真要“清空”,得切断数据源再重绘。

  • 清空 ≠ 重载,是把 data 设为空数组,并确保不触发远程请求
  • 如果用了 url 配置,必须先删掉它,否则 reload 仍会发请求
  • 直接操作 DOM(比如 $('tbody').empty())会导致 layui 内部状态错乱,分页、排序等功能失效

用 table.render() 重新渲染空数据最稳妥

这是官方没明说但最可靠的清空方式:用完全相同的配置项,只把 data 改成 [],并显式移除 url

  • 保留原 elemcolspage 等配置,避免列宽/样式丢失
  • 必须加 url: null 或删掉 url 字段,否则即使给了 data: [],layui 仍可能忽略它去请求接口
  • 如果启用了 page: true,记得同步设 total: 0,否则分页栏可能还显示“1 / 1”
table.render({
  elem: '#demo',
  cols: [[{field:'id', title:'ID'}]],
  data: [], // 关键:空数组
  url: null, // 关键:禁用远程请求
  page: {total: 0}
});

已有 table 实例时,用 table.clearCache() + 重 render

如果你已经调用过 table.render() 得到了一个实例(比如 tableIns),不能直接改它的 config.data,layui 不响应式更新。

Riffo
Riffo

Riffo是一个免费的文件智能命名和管理工具

下载
  • table.clearCache('yourTableId') 只清缓存,不清界面,也没用
  • 必须配合重新 render(),且传入的 id 要和原实例一致,否则新旧实例冲突
  • 如果原表用了 id: 'userTable',重 render 时也得写 id: 'userTable',不然工具栏按钮绑定会失效

清空后工具栏按钮点击报错?检查 event 绑定是否残留

清空表格后点自定义工具栏按钮抛 Cannot read property 'data' of undefined,大概率是因为事件监听还绑在旧的 tr 上,而 DOM 已被替换。

  • 不要用 $(document).on('click', '.btn-del', ...) 这种全局委托——它能触发,但取不到当前行 data
  • 正确做法是在 toolbar 回调里用 obj.data 拿数据;清空后这个回调自然不执行,也就不会出错
  • 如果非要用全局委托,务必在清空后手动 $('.btn-del').off('click'),再重新绑定(不推荐)
layui 的表格清空本质是“用空数据重绘”,不是“删 DOM”。最容易漏的是 url: nullid 一致性——这两点一错,看着清了,其实后台还在偷偷请求,或者工具栏彻底失联。

相关标签:

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

202

2023.08.11

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

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

275

2023.10.09

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

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

413

2024.03.19

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

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

233

2024.03.22

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

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

122

2024.05.22

Python WebSocket实时通信与异步服务开发实践
Python WebSocket实时通信与异步服务开发实践

本专题聚焦 Python 在实时通信场景中的开发实践,系统讲解 WebSocket 协议原理、长连接管理、消息推送机制以及异步服务架构设计。内容包括客户端与服务端通信实现、连接稳定性优化、消息队列集成及高并发处理策略。通过完整案例,帮助开发者构建高效稳定的实时通信系统,适用于聊天应用、实时数据推送等场景。

5

2026.03.18

Java Spring Security权限控制与认证机制实战
Java Spring Security权限控制与认证机制实战

本专题围绕 Java 后端安全体系建设展开,重点讲解 Spring Security 在权限控制与认证机制中的应用实践。内容涵盖用户认证流程、权限模型设计、JWT 鉴权方案、OAuth2 集成以及接口安全防护策略。通过实际项目案例,帮助开发者构建安全可靠的后端认证体系,提升系统安全性与可扩展能力。

21

2026.03.18

抖漫入口地址合集
抖漫入口地址合集

本专题整合了抖漫入口地址相关合集,阅读专题下面的文章了解更多详细地址。

137

2026.03.17

多环境下的 Nginx 安装、结构与运维实战
多环境下的 Nginx 安装、结构与运维实战

本专题聚焦多环境下Nginx实战,详解开发、测试及生产环境的差异化安装策略与目录结构规划。深入剖析配置模块化设计、灰度发布流程及跨环境同步机制。结合监控告警、故障排查与自动化运维工具,提供全链路管理方案,助力团队构建灵活、高可用的Nginx服务体系,从容应对复杂业务场景挑战。

14

2026.03.17

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号