直接绑定失效因输入框DOM动态重建,须用事件委托监听.layui-laypage-skip input;回车需校验输入值并调用table.reload()(内置分页)或laypage.jump()(独立分页)触发真实跳转。
为什么直接给分页输入框绑 keydown 会失效
layui 的分页组件(laypage)在渲染后,页码跳转输入框是动态插入的 dom,且每次点击页码、切换每页条数或调用 laypage.render() 重绘时都会被销毁重建。直接用 $('#layui-laypage-input').on('keydown', ...) 绑定,下次重绘后事件就丢了——不是代码写错,是 dom 生命周期不匹配。
必须用事件委托监听 .layui-laypage-skip input
分页跳转输入框固定有 class layui-laypage-skip,其内部 input 是唯一稳定选择器。不能监听整个 laypage 容器,要精确到这个 input:
- 绑定目标必须是父级稳定容器,比如表格外层
div或body - 用
layui.$(document).on('keydown', '.layui-laypage-skip input', ...)实现委托 - 判断回车必须用
e.key === 'Enter',避免旧版keyCode在部分浏览器或移动端失效 - 务必调用
e.preventDefault(),否则回车会触发表单默认提交或页面刷新
laypage 输入框回车后如何真正跳转到指定页
单纯拦截回车没用,得主动触发跳转逻辑。Layui 分页不提供「跳转到输入值」的 API,需手动读取输入值、校验、再调用 laypage.jump():
- 用
$(e.target).val().trim()获取输入值,转成整数parseInt(..., 10) - 检查是否为空、是否超出总页数(
count / limit向上取整)、是否小于 1 - 合法值才调用
laypage.jump(paginationId, { curr: targetPage }),其中paginationId是你初始化laypage.render()时传的id配置项 - 若表格用了
table.render()并启用了内置分页,应优先监听table.on('page(test)'),而非操作 laypage —— 因为 table 内部已封装分页逻辑,直接改 laypage 可能不同步
表格内置分页场景下,回车跳转必须走 table.reload()
如果你的表格是通过 table.render() 初始化、且未禁用 page: true,那么 Layui 已将分页与表格数据联动。此时手动操作 laypage 极易导致视图与数据不一致:
- 不要自己调
laypage.jump(),而应在回车后调用table.reload('yourTableId', { page: { curr: targetPage } }) -
table.reload()会自动同步更新分页栏显示、请求新页数据、并重置 laypage 状态 - 注意:
targetPage必须是合法整数,否则 reload 会静默失败,控制台无报错但页码卡住 - 若用户输的是非数字(如“abc”),建议清空输入框并
focus(),避免残留脏数据


















