layui table分页栏显示加载耗时需在request前记录起始时间、done回调中计算并更新.layui-table-page .layui-laypage-count文本，注意防重复写入、阈值过滤及版本兼容性。
layui table 分页栏自定义显示加载耗时的原理
layui 的 table.render() 默认不提供加载耗时显示功能，分页栏文案由内置模板控制，必须通过重写 pagebar 模板或劫持渲染后 DOM 来实现。直接改源码或强行覆盖 CSS 不可靠，因为 layui 2.8+ 后分页结构动态生成且带防重复绑定逻辑。
用 done 回调 + setTimeout 记录真实耗时
layui 表格的 done 回调在数据加载完成、表格重绘完毕后触发，此时可读取真实渲染结束时间。注意不能只用 start = Date.now() 放在 render() 前——网络请求、前端解析、DOM 插入都会影响最终“可见耗时”，必须以 done 触发为终点。
常见错误：在 before 钩子（不存在）或 request 中记录起始时间，但没考虑表格重绘开销；或者把耗时塞进 title 或 cols，导致每行都重复显示。
- 在
table.render()外层定义let startTime - 在
request方法开头记录startTime = Date.now()（推荐，比放 render 前更准） - 在
done回调里计算const cost = Math.round((Date.now() - startTime) / 100) / 10（保留一位小数） - 用
$('.layui-table-page .layui-laypage-count')定位分页文字区域并插入耗时（注意：layui 2.8+ 分页容器 class 是layui-table-page，不是旧版的layui-laypage）
替换分页栏文案需避开 layui 内部重绘冲突
layui 在分页切换、搜索、重载时会反复调用内部 table._initPageBar()，直接操作 DOM 可能被覆盖。必须确保每次 done 都重新写入，且加防抖或判空避免重复追加。
典型错误现象：当前加载耗时0.3秒当前加载耗时0.3秒 连续出现两次——这是因为没清空原有文本，或在非首次 done 里又 append 了一次。
- 不要用
.append()，统一用.text('共 ' + count + ' 条｜当前加载耗时' + cost + '秒') - 优先选
.layui-table-page .layui-laypage-skip后的兄弟节点，或直接找.layui-laypage-count（它通常包含“共 X 条”） - 如果项目用了
skin: 'line'或size: 'sm'，分页结构不变，选择器仍有效 - 兼容性提醒：layui 2.7 以下版本分页容器是
.layui-laypage，需额外判断$('.layui-laypage-count').length
示例代码片段（可直接嵌入 render 配置）
<script>
let startTime;
table.render({
elem: '#demo',
url: '/api/list',
request: {
pageName: 'page',
limitName: 'limit'
},
// 关键：在 request 发起前记时
before: function() {
startTime = Date.now();
},
done: function(res, curr, count) {
const cost = Math.round((Date.now() - startTime) / 100) / 10;
const $countEl = $('.layui-table-page .layui-laypage-count');
if ($countEl.length) {
$countEl.text(`共 ${count} 条｜当前加载耗时${cost}秒`);
}
}
});
</script>
注意：before 是 layui 2.8+ 新增钩子，若用旧版，请把 startTime = Date.now() 放到 request 函数第一行，并确保该函数返回标准 request 参数对象。
真正容易被忽略的是：当表格开启 height 且内容不足一屏时，done 仍会触发，但用户感知不到“加载”，此时耗时可能极短（如 20ms），显示“当前加载耗时0.0秒”反而干扰。建议加个阈值过滤：if (cost > 0.1) { /* 更新文案 */ }。
