如何检测bootstrap-table插件完成渲染的时机？

我之前也碰到过一模一样的情况，大型表格初始化时的原生状态确实挺影响用户体验的，这里给你几个实用的解决办法：

方法一：初始化前隐藏表格，完成后显示 #

这是最直接的方案，用CSS先把原生表格藏起来，等插件加载完成后再显示，避免用户看到未渲染的状态：

1. 给表格加个初始隐藏的自定义类，比如table-loading：

<table class="my-table table-loading" data-toggle="table">
  <!-- 表格内容 -->
</table>

2. 添加对应的CSS样式（用visibility而非display，避免布局跳动）：

.table-loading {
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

3. 监听Bootstrap-Table的初始化完成事件，移除隐藏类：

$('.my-table').on('all.bs.table', function() {
  $(this).removeClass('table-loading');
});

小提示：all.bs.table会在所有初始化操作（包括数据渲染、组件生成）完成后触发，适合大型表格；如果是数据量较小的表格，用post-body.bs.table（表格主体渲染完成）也能达到效果。

方法二：提前添加基础样式和模拟复选框 #

如果不想完全隐藏表格，可以提前给原生表格加上和Bootstrap-Table一致的基础样式，同时模拟复选框占位，减少视觉差异：

1. 给表格提前加上Bootstrap的基础表格类：

<table class="my-table table table-striped" data-toggle="table">
  <!-- 表格内容 -->
</table>

2. 给表头的复选框列加个模拟的占位元素，样式和插件生成的复选框一致：

<thead>
  <tr>
    <th data-checkbox="true">
      <div class="checkbox"><label><input type="checkbox"></label></div>
    </th>
    <th>One</th>
    <th>Two</th>
  </tr>
</thead>

这个模拟的复选框会在插件初始化时被自动替换掉，用户只会看到短暂的占位，不会觉得突兀。

方法三：从根源优化加载速度 #

如果你的表格数据量极大，还可以从减少初始化时间入手：

• 启用Bootstrap-Table的pagination分页功能，只加载第一页数据
• 开启serverSide服务器端分页，让后端返回分页后的数据，降低前端渲染压力
• 确保Bootstrap和Bootstrap-Table的JS/CSS从稳定CDN加载，且浏览器能缓存这些资源

这些方法都能有效缓解加载初期的原生表格显示问题，你可以根据自己的业务场景选最合适的方案。

内容的提问来源于stack exchange，提问作者StanMarsh