layui分页怎么改loading加载动画-Layui教程-PHP中文网

table.render的loading属性不生效，是因为仅当配置url且未传data时才自动触发；若用本地data、权限拦截返回空数据、低版本不支持html模板或reload未继承配置，均会导致失效。

layui分页怎么改loading加载动画

table.render 的 loading 属性不生效？先确认是否用了 url 模式

只有设置了 url 且未设 data（即走异步请求），loading 才会自动触发。如果表格用的是本地 data: []，哪怕写了 loading: true，也不会显示任何加载状态。

常见误判点：

初始化时写了 url，但后续 table.reload() 传了 data 覆盖，导致分页点击时静默走本地渲染，loading 彻底失效
权限拦截或后端返回空数据（如 {code:401}），Layui 认为“请求已完成”，不触发 loading，也不报错
v2.9.10 以下版本不支持 HTML 字符串形式的 loading，传入字符串会被忽略，只认布尔值

想换图标或加文字？优先用 v2.9.10+ 的 loading 字符串模板

这是最轻量、最可控的方式，无需额外 CSS 或监听钩子，直接在 table.render() 里写：

loading: '<i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 24px; color: #009688;"></i><span style="margin-left: 8px;">正在加载...</span>'

注意几个硬性条件：

必须是 Layui v2.9.10 或更高版本，低版本会直接丢弃该字符串，回退到默认文字
HTML 内容会被插入到 .layui-table-loading 容器中，不能含 script 标签，避免 XSS
layui-anim-rotate 和 layui-anim-loop 缺一不可，否则图标不转
不要用 layui-icon-loading（静止图标），得用 layui-icon-loading-1（可动画版本）

分页点击没 loading？本质是 reload 时没继承原配置

Layui 分页点击底层调用的是 table.reload()，但它**不会自动带上初始化时的 loading 配置**，除非你在 page: { layout: [...] } 中显式控制，或重写 request.jump。

稳妥做法是在 request 钩子里手动接管：

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

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

下载

request: {
  pageName: 'page',
  limitName: 'limit',
  // 分页跳转前手动开 layer.load
  jump: function(obj, first) {
    if (!first) {
      // 非首次渲染（即分页点击），打开 loading
      this.loadIndex = layer.load(1, { shade: [0.2, '#fff'] });
    }
  }
},
done: function(res, curr, count) {
  // 渲染完成后关闭
  if (this.loadIndex) {
    layer.close(this.loadIndex);
    this.loadIndex = null;
  }
}

关键细节：

jump 是唯一能捕获“用户点击分页按钮”这一动作的钩子，beforeSend 在某些旧版中不可靠
必须把 loadIndex 挂在 this 上（即表格实例），否则 done 回调拿不到引用
别在 jump 里直接调 layer.close() —— 此时请求还没发，关早了

自定义动画要覆盖 CSS？重点盯死 .layui-table-loading 的 display 和 position

如果你用的是 CSS 方案（兼容所有版本），核心不是改图标，而是确保自定义内容能完整展示。Layui 默认给 .layui-table-loading 设了 display: none 和 position: absolute，容易导致 flex 居中失效或被遮挡。

必须加的 CSS：

.layui-table-loading {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  background: transparent !important;
}
.layui-table-loading i {
  font-size: 28px !important;
  color: #1E9FFF !important;
}

容易踩的坑：