layui分页如何修改跳转按钮的文字

作者:袖梨 2026-08-31

jump参数仅用于监听跳页动作,不控制按钮文字;按钮文字由prev、next、first、last字段配置,表格分页中“跳至”文字需通过page.jump设置且layout必须包含'skip'。

laypage.render 的 jump 参数不是用来改按钮文字的

很多人搜“跳转按钮文字”,第一反应是配 jump 字段,但这是错的。jump 是 laypage 的回调函数名,只负责监听跳页动作,它本身不控制任何文案。真正管按钮文字的是 prevnextfirstlast 这几个独立字段。

表格分页中“跳至第几页”的文字由 page.jump 控制,但必须满足前提

如果你用的是 table.render() 且启用了内置分页,想改“跳至”这两个字(不是输入框后面的“页”字),得配 page.jump,但有硬性条件:

  1. page.layout 数组里必须显式包含 'skip' —— 缺了它,整个跳转区域 DOM 都不生成,jump 字段再怎么写也无效
  2. 字段名只能是 jump,写成 skipjumpTextgoto 全部被忽略
  3. 这个字段只替换“跳至”两个字,不影响输入框、按钮或校验逻辑
  4. 别去 DOM 里手动改 .layui-laypage-skipinnerText —— 翻页重绘会立刻覆盖

laypage 组件本身的上/下一页按钮文字直接配 prev 和 next

如果是独立使用的 laypage.render(),改按钮文字最简单:把文本当字符串传进去就行。

laypage.render({elem: 'demo',count: 100,prev: '← 返回',next: '继续 →',first: '首页',last: '尾页'});

注意:prevnext 支持 HTML 字符串(比如加 icon),但别用太复杂的结构,Layui 对内联样式和标签深度有限制;firstlast 同理,但它们默认值分别是 "首页" 和自动计算的末页页码,设为空字符串会留白。

为什么改了配置却没生效?先看这三处

常见失效不是代码写错,而是环境没对齐:

  1. 打开浏览器开发者工具,检查分页容器里是否存在 .layui-laypage-skip(表格)或 .layui-laypage-prev(laypage)—— 没这个 class,说明配置根本没走通
  2. 确认你改的是哪个实例:表格分页和独立 laypage 的配置对象完全分开,混用会导致改了 A 却看 B
  3. 如果用了自定义主题(theme)或全局 CSS 覆盖了 .layui-laypage 相关样式,某些文字可能被 visibility: hiddenfont-size: 0 干掉,得单独检查

真正容易被忽略的是:Layui 的文案渲染是“配置驱动 + layout 触发”的,少一个数组项、错一个字段名、多一个空格,就退回默认中文。别猜,直接看 DOM 是否生成对应节点。

相关文章

精彩推荐