Layui table 的 pagebar 文本无法直接配置,需在 done 回调中通过 DOM 操作替换 .layui-table-page span:last-child 内容,优先用 res.count 计算范围并防越界,避免依赖 CSS 或修改源码。
layui table 的 pagebar 文本怎么改
直接改不了——layui.table 没提供现成的「页码文字模板」配置项。它默认渲染的「n-m条,共x条」是硬编码在源码里的,不走 text 或 limitname 这类常规配置。
真正能动手的地方只有两个:一是用 CSS 隐藏原生文字 + 用 DOM 插入自定义文案;二是监听 done 回调,在表格重绘后手动替换节点内容。
- 推荐用
done方式,更稳定,不依赖 CSS 选择器结构(Layui 升级可能改 DOM 类名) - 别碰
layout里加自定义 HTML,pagebar不支持传函数或模板字符串 - 注意:这个操作必须等表格实例初始化完成后再执行,否则
done可能没触发或 DOM 还没生成
在 done 回调里替换分页文字
done 是唯一安全、可控的时机。每次翻页、重载、搜索后都会触发,且此时 .layui-table-page 区域已渲染完毕。
示例代码(假设表格实例为 tableIns):
tableIns = table.render({
elem: '#demo',
url: '/api/list',
page: true,
done: function(res, curr, count) {
// 找到分页栏里的文字容器(通常是 .layui-table-page div 的最后一个 span)
const pageTextEl = document.querySelector('.layui-table-page span:last-child');
if (pageTextEl) {
const total = res.count || count;
const limit = this.page.limit;
const start = (curr - 1) * limit + 1;
const end = Math.min(curr * limit, total);
const text = total === 0
? '暂无数据'
: `第 ${start}-${end} 条,总计 ${total} 条`;
pageTextEl.innerHTML = text;
}
}
});- 用
res.count优先,它来自接口返回;fallback 到count参数(仅限前端分页) - 注意
start/end要防越界,特别是最后一页总数不是limit整数倍时 - 别用
jQuery.text()或innerText,有些版本 Layui 会往里面塞,用innerHTML更可靠
为什么不能改 layui.table.config 或全局语言包
Layui 的语言配置(layui.config({extend: [...]}) 或 layui.set({}))只影响按钮文字(如「上一页」「下一页」)、加载提示等,pagebar 的统计文案压根不走语言包逻辑。
- 翻过 Layui 源码就知道:
table.js里有段硬写的res = '第 '+ start +'-'+ end +' 条,共 '+ count +' 条',没做任何变量提取 - 试图 patch
layui.table原型方法风险高,后续升级极易失效 - 别在
render前改layui.table.prototype.done,它不是公共 API,属于内部实现细节
移动端适配和多语言场景下的坑
如果项目要支持中英文切换,或者在小屏设备上折叠显示,这段替换逻辑得额外判断上下文。
- 中文文案「第 x-y 条,总计 z 条」在窄屏上可能换行错乱,建议加 CSS:
.layui-table-page span:last-child { white-space: nowrap; } - 国际化时,别把翻译字符串写死在
done里,抽成函数,比如formatPageText({start,end,total}, locale) - 如果用了 Layui 的
mobile模式(skin: 'row'),分页结构会变,span:last-child可能选错——得用更具体的 selector,比如.layui-table-page .layui-laypage-skip + span
最麻烦的其实是服务端返回的 count 字段名不统一,有的叫 total,有的叫 recordsTotal,done 里得先做字段映射,不然 res.count 总是 undefined。


















