Layui表格怎么实现在分页栏显示“共X页，当前第Y页”-Layui教程-PHP中文网

Layui表格默认不显示“共X页，当前第Y页”，需在done回调中计算总页数并动态插入DOM，再调用element.init('laypage')重载样式，同时补充CSS右对齐控制。

layui table 的 `page` 配置里没有内置“共X页，当前第Y页”文案

layui 2.8+ 的 table.render() 默认分页栏只显示上一页/下一页、页码跳转和每页条数选择，不渲染“共x页，当前第y页”这类文字。这不是漏配，是设计如此——它把这部分交由开发者自行注入 dom 或用 layout + done 回调控制。

用 `done` 回调 + `element.init()` 动态插入文案

最稳妥的方式是在表格渲染完成（done）后，定位到分页容器，手动追加文字节点。注意必须调用 element.init() 重载，否则 layui 的分页组件样式会错乱。

done 回调中可拿到 res（原始数据）、curr（当前页）、count（总条数）、limit（每页条数），由此算出总页数：Math.ceil(count / limit)
分页栏 DOM 通常在 .layui-table-page .layui-laypage 下，但更可靠的是查 .layui-table-view .layui-table-page 内的 .layui-laypage
追加文案要放在 .layui-laypage 内部末尾，避免破坏原有结构；建议用 span 包裹并加 class 方便后续样式控制
追加后立即调用 layui.element.init('laypage')，否则分页按钮可能失效或样式丢失

table.render({
  elem: '#demo',
  url: '/api/list',
  page: { layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] },
  done: function(res, curr, count) {
    const totalPage = Math.ceil(count / this.limit);
    const $pageWrap = $('.layui-table-view .layui-table-page .layui-laypage');
    if ($pageWrap.length) {
      $pageWrap.append(`<span class="layui-laypage-total">共${totalPage}页，当前第${curr}页</span>`);
      layui.element.init('laypage'); // 必须重载
    }
  }
});

CSS 样式要单独补，否则文字会挤在按钮中间

layui 默认没给自定义文案留位置，直接 append 会导致文字紧贴“下一页”按钮。需要加一点 CSS 把它右对齐并留出间距：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

用 .layui-laypage-total 类名（示例中已设）统一控制
推荐设置 float: right; margin: 0 15px; line-height: 30px;，匹配 laypage 默认行高
如果用了 layout: ['count', ...]，.layui-laypage-count 已存在，可复用其样式逻辑，但不要覆盖它的内容

.layui-laypage-total {
  float: right;
  margin: 0 15px;
  line-height: 30px;
  color: #666;
}

注意分页跳转时文案不会自动更新

用户点页码、“跳转”或改 limit 时，done 会再次触发，所以文案能刷新——但前提是你的表格启用了前端分页（page: true）且服务端返回了正确 count。如果用了前端静态数据（data: [...] + page: true），layui 会自动算 count，没问题；但若服务端分页没返回 count 字段，done 中的 count 就是 0，总页数就成 NaN。

后端接口必须返回 count（总记录数），不能只返回当前页数据
如果用的是 url 异步加载，检查响应体是否含 count 字段，字段名需与 response.countName 配置一致（默认是 count）
调试时可在 done 里 console.log(curr, count) 确认数值是否合理