Layui table 无原生点击前拦截事件,分页行为由 laypage 控制且 page 事件在翻页完成后触发;可靠方案是禁用内置分页,用 laypage.render 自定义分页并在 jump 回调中校验后调用 table.reload。
layui table 没有“点击前拦截”的原生事件
layui 的 table 组件不提供类似 beforepage 或 pagewillchange 这类可取消的前置钩子。所有分页行为(点页码、跳转、上下页)都由内部 laypage 控制,表格只被动响应 page 事件——它发生在翻页**完成之后**,数据已刷新、dom 已重绘。
想“拦截”只能靠提前干预用户操作
真正能卡在点击发生前的,只有对分页容器 DOM 的手动监听。但要注意:这不是官方支持路径,稳定性差,且无法阻止 Layui 内部默认行为(比如跳转后仍会触发 page 事件)。
- 监听分页条的
.layui-laypage-btn(上/下页)、.layui-laypage-curr(当前页码)、.layui-laypage-skip input(跳转输入框)的click或input事件 - 在回调里用
event.preventDefault()和return false尝试阻止默认跳转 - 但 Layui 的
laypage是事件委托 + 自动重绘,单纯阻止 click 往往无效;input 跳转还涉及 blur 后的自动提交逻辑 - 更现实的做法是:禁用分页控件(
$('.layui-laypage').addClass('layui-disabled')),或在用户操作前弹窗确认,再手动调用table.reload()
替代方案:用 reload + page.curr 控制实际请求时机
如果你的真实需求是“用户点了第 5 页,但我得先校验权限/状态,再决定是否真加载”,正确做法不是拦点击,而是把分页逻辑收归自己控制:
- 渲染表格时关闭内置分页:
page: false - 单独用
laypage.render()渲染分页条,并在jump回调里做校验 - 校验通过后,再调用
table.reload('test', {page: {curr: obj.curr}})触发真实请求 - 这样你完全掌控了“点一下 → 校验 → 请求 → 渲染”的全链路,
obj.curr就是你拿到的原始目标页码
为什么别碰 table.config.page.curr 或 table.cache
这两个地方根本存不住你要的“即将跳转的页码”:
-
table.config.page.curr只是初始化时传入的默认值,翻页后它**不会变** -
table.cache存的是当前页的行数据数组,和页码无关 - 试图从
$('.layui-laypage-em').next().text()这类 DOM 路径读取“将要点的页码”,既不可靠(比如用户还没点,只是 hover),又无法区分是点页码还是点跳转按钮
真正的页码流转只存在于 laypage.jump 回调的 obj.curr 和 table.on('page()') 的 obj.curr 中——但它们都是“已发生”信号,不是“将发生”。需要前置控制,就得绕开内置分页,自己搭一层。











