最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Layui表格如何在分页工具条中展示自定义提示语
时间:2026-07-29 12:51:05 编辑:袖梨 来源:一聚教程网
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插值,否则该字符串将被过滤
复杂点在于:提示语内容依赖后端响应结构、前端解析逻辑、layout 渲染时机三者严格匹配。少一个环节,就只剩空白。
相关文章
- 代号莲好玩吗 代号莲玩法介绍与新手入门指南 07-30
- 哔哩轻小说怎么更换阅读背景 07-30
- snowmanzhuang/yixueAIganhuo-PPT skill 本地安装使用教程(新手) 07-30
- 饥困荒野间作种植比例图 07-30
- 饥困荒野食谱大全 07-30
- 如何通过日志优化Ubuntu Node.js部署 07-30