laypage.render() 的 prev/next 参数直接在配置对象中设置字符串即可覆盖默认文字,无需语言包;table.render() 中则须在 page 对象内配置,且 layout 必须包含 'prev' 和 'next' 才生效。

laypage.render() 的 prev/next 参数直接改文字
直接在 laypage.render() 配置对象里写 prev 和 next 字符串,就能覆盖默认的“上一页”“下一页”。这两个字段是独立生效的,不依赖语言包或额外加载。
常见错误是误以为要配 lang 或引入 laypage.langs.en——其实完全不需要。lang 只在配合完整语言包时才起作用,而 prev/next 是最优先的硬覆盖项。
-
prev: '‹'、next: '›'这类纯符号写法也合法 - 支持 HTML 字符串,比如
prev: '<i class="layui-icon"></i> 返回'(注意引号转义) - 如果用了
table.render()的分页,得去page配置对象里设,不是在顶层传
table.render() 中改 prev/next 容易漏掉 page 对象层级
Layui 表格的分页文案不是由全局 laypage 控制,而是嵌套在 table.render() 的 page 参数里。很多人写了 prev: 'Back' 却放在 table.render() 顶层,结果完全没反应。
必须确保:
-
page是一个对象,不能是true -
prev和next字段写在page对象内部,和limit、curr同级 -
layout数组里得有'prev'和'next',否则按钮根本不渲染
示例正确结构:
table.render({
elem: '#demo',
url: '/api/list',
page: {
layout: ['count', 'prev', 'page', 'next'],
prev: 'Back',
next: 'Next',
limit: 20
}
});
为什么改了 prev/next 却没变?检查 layout 是否匹配
即使你写了 prev: '返回',如果 layout 里没写 'prev',这个按钮压根不会出现在 DOM 里。Layui 是“按 layout 渲染”,不是“按字段渲染”。
常见 layout 组合与对应字段关系:
-
'prev'→ 触发prev字段 -
'next'→ 触发next字段 -
'skip'→ 才触发jump字段(不是prev/next) - 漏掉任意一项,对应区域空白或回退默认中文
验证方式:打开浏览器开发者工具,搜索 .layui-laypage-prev 或 .layui-laypage-next,看元素是否存在、文本是否已更新。
自定义符号或图标后,按钮点击失效?别动 page 布局项
有人为了精简 UI,把 layout 改成 ['prev', 'next'],结果按钮可见但点不动。这是因为 'page' 不只是显示页码数字,它是 Layui 分页逻辑的事件挂载容器。
只要去掉 'page',prev 和 next 按钮就变成静态 DOM,无法触发翻页逻辑。现象是:curr 不变、done 回调不执行、网络请求不发。
安全做法:
- 保留
layout: ['prev', 'page', 'next'] - 用 CSS 隐藏中间页码数字:
.layui-laypage em, .layui-laypage a:not(.layui-laypage-prev):not(.layui-laypage-next) { display: none; } - 不要试图删掉
'page'来“简化”结构
真正容易被忽略的是:'page' 是功能锚点,不是视觉装饰。它空着也得留着,否则整个分页就断了。


















