Layui表格如何在分页工具条中展示自定义提示语

作者：袖梨 2026-07-29

layui table 分页自定义提示语需同时配置 page.count=false、parseData 中 return {count: n, data: [...]}，并在 layout 中用 '共 data.count 条' 等插值字符串替换 'count'。

layui table 的 `page` 配置里怎么加自定义提示语

直接修改 limits 或者 limit 都不会生效，分页工具条文案真正由 page 对象中的 prev、next、jump 以及 count 这些字段共同控制，而其中 count 最为关键——“共 xx 条”这段文字是否出现以及显示哪些内容，都由它决定。

常见错误是只配了 page: true 或只改 limit，结果提示语还是默认的“共 100 条”。其实 count 默认为 true，但它的行为是：仅当后端返回了 count 字段时才渲染“共 x 条”，否则不显示。想强制显示自定义文案，得关掉自动逻辑，手动接管。

count: false 先关闭默认计数，防止它与自定义文案发生冲突
通过 layout 数组将 count 替换为自定义 HTML 片段，例如 '<span>找到 <code>data.count 条记录</span>'
还必须配合 parseData 事先从响应结果中取出真实总数，并保存至 data.count 中；不然 data.count 将得到 undefined

怎样在 `parseData` 阶段预先取得总条数，再将其透传至 layout

后端提供的返回结构通常并不符合 layui 默认预期的 {count: 123, data: [...]}，例如返回内容可能是 {total: 123, list: [...]}，此时如果不作处理，count 便无法取得数据，自定义文案只能固定写死或者保持空白。

处理方式是在 parseData 回调中将总数赋给 res.count（要注意并非 res.data.count），这样等到 layout 后续渲染时 data.count 才可以读取该值。

不要进入 parseData 后修改 res.data 的结构以适配 layui，默认情况下只要它识别 res.data 为数组即可
务必 return {count: xxx, data: xxx}，否则你设置的 count 会被 layui 忽略
如果后端没有提供总数（例如采用流式分页），count 只能设置成 0 或保持空白，建议此时在 layout 中使用“已加载 data.length 条”之类的动态文案

通过 `layout` 替换默认分页元素时需要注意的 HTML 注入细节

layout 它属于字符串数组，工具条元素的排列由数组顺序决定，默认值为 ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']。若要用自定义提示替换“共 xx 条”，需要把 'count' 改成包含插值内容的 HTML 字符串。

该字符串只能使用 data 对象所包含的属性，例如 data.count、data.limit、data.curr。不要填写 this.count 或者 res.count，这些都不起作用。

推荐写法：'<span class="layui-laypage-count">共 <code>data.count 条，目前为第 data.curr 页</span>'
不正确的写法：'共 ${data.count} 条'（不支持 ES6 模板字符串）
需要添加样式时，可直接写入内联 style 或 class，因为 layui 不会自动补充 wrapper 容器
不要遗漏 prev、next 等必需控件，不然翻页按钮会消失

layout 修改后为何仍未生效？需要检查这些常见兼容问题

最常踩的坑是：改了 layout，也写了 parseData，但提示语还是空白。大概率是三个地方没对齐：

page: {count: false} 因忘记添加，默认 count 会与自定义文案一起渲染，造成后者被覆盖或位置错乱
parseData 中没有 return 新对象，或者 return 的对象缺少 count 字段（即便其值为 0）
当表格执行重载时（例如 table.reload()），没有同步提供新的 page 以及 parseData 配置，导致系统仍然沿用旧配置
实际使用的是 layui 2.8+，查阅的却是旧版文档；新版本规定 layout 中的自定义字符串至少要包含一个 data.xxx 插值，否则该字符串将被过滤