Question

我有一个相当大的表正在使用这个bootstrap-table插件：http://bootstrap-table.wenzhixin.net.cn/documentation。当我第一次加载页面时，表格需要一秒钟才能加载插件的功能，因此该表格在没有样式和复选框的情况下显示。

<table class="my-table" data-toggle="table">
  <thead>
    <tr>
      <th data-checkbox="true"></th>
      <th>One</th>
      <th>Two</th>
    </tr>
  </thead>
  <tbody>
    <!-- About 1000 rows -->
  </tbody>
</table>

有没有办法检测插件何时完成渲染表？我已尝试使用load-success.bs.table和post-body.bs.table事件，但他们甚至看不到第一次加载。

见jsfiddle：https://jsfiddle.net/xpvt214o/95804/ 每次单击“运行”时，表格都会显示没有任何样式和复选框，只需一瞬间。

Answer 1

尝试在加载时将正文的不透明度设置为0，并在插件加载后将其重置为1（检查Fiddle）

CSS

body { opacity: 0 }

的jQuery

$(function() {
  $(".my-table").bootstrapTable('hideLoading');
  $('body').css('opacity','1');
})

Answer 2

尝试下面的代码行。

$(".my-table").bootstrapTable({
    ...
    onLoadSuccess: function() {
        // do something
    },
    ...
 });

Answer 3

我更新了你的JS小提琴，并在CSS表中添加了一个关键帧fadeIn。

.my-table {
    opacity:0;
    animation: fade-in ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode:forwards; /*when the spec is finished*/
    -webkit-animation: fade-in ease 2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
    -moz-animation: fade-in ease 2s;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode:forwards; /*FF 5+*/
    -o-animation: fade-in ease 2s;
    -o-animation-iteration-count: 1;
    -o-animation-fill-mode:forwards; /*Not implemented yet*/
    -ms-animation: fade-in ease 2s;
    -ms-animation-iteration-count: 1;
    -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

https://jsfiddle.net/xpvt214o/96072/

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

3 个答案: