layui表格分页文字需在table.render()的page配置项中通过prev、next、count、jump、limit等字段修改,且必须与layout数组对应项一致,否则不生效。
layui table 分页文字在哪改:直接改 page 配置项
layui 的表格分页提示(如“共 100 条,每页显示 10 条”)不是写死在 css 或模板里,而是由 table.render() 的 page 参数控制。只要传入带中文文案的对象,就能覆盖默认值。
常见错误是去翻 layui.css 或试图用 DOM 操作改文字——没用,这些文字是 JS 渲染生成的,且后续翻页会重绘。
-
page必须是对象,不能是布尔值true;否则自定义文案不生效 - 必须和
limits、limit等分页参数一起传入同一级page对象中 - 文案字段名固定,比如
prev、next、count、jump,拼错就回退到默认中文
示例:
table.render({
elem: '#demo',
url: '/api/list',
page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
curr: 1,
limit: 10,
limits: [10, 20, 50, 100],
count: 123,
prev: '上一页',
next: '下一页',
jump: '跳至',
count: '共 <code>data.count</code> 条',
limit: '条/页'
}
});
为什么改了没反应?检查 layout 是否漏了对应项
分页栏每个文字都绑定在 layout 数组里的某个关键字上。比如你写了 prev: '?',但 layout 里没写 'prev',那这个箭头根本不会渲染出来,自然也看不到你的修改。
常用 layout 项对应文案字段:
-
'count'→ 显示“共 X 条”,受count字段控制 -
'limit'→ “条/页”,受limit字段控制 -
'skip'→ “跳至”,受jump字段控制(注意不是skip) -
'refresh'→ 刷新按钮文字,默认“刷新”,可直接设为refresh: '?'
漏掉任意一项,对应区域要么空白,要么回退成默认文字,而不是报错。
后端返回 total 时,count 字段别硬编码
很多人在 page: { count: 123 } 里写死数字,结果接口返回真实总数后,分页文字还是“共 123 条”——因为 layui 不会自动同步后端的 count 值,它只认你初始化时写的那个数。
正确做法是让后端响应格式包含 count 字段(layui 默认识别),并确保 response 配置对得上:
- 默认后端需返回
{count: 234, data: [...]} - 如果后端字段名不同(如叫
total),必须配response: { count: 'total' } - 此时初始化时
page.count可删掉,或设为null,让 layui 自动取响应值
否则,无论接口返回多少,分页文字里的“共 X 条”永远是你写死的那个数。
国际化场景下慎用全局替换,优先走配置
有人图省事,在页面加载后用 $('body').find('.layui-laypage-count').text(...) 全局替换,短期能用,但翻页、重载、异步重绘后文案会被 layui 覆盖回去。
真正稳定的方案只有两个:
- 初始化时通过
page配置项一次性写全 - 需要动态切换语言时,调用
table.reload()并传入新的page配置(注意要带上所有分页相关字段,不能只传prev和next)
另外,laypage 独立组件的文案改法和 table 不同,别混用——table 的分页是封装过的,不走 laypage 的 done 或 jump 回调改文案。










