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

时间:2018-04-11 07:32:15

标签: jquery twitter-bootstrap bootstrap-table

我有一个相当大的表正在使用这个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.tablepost-body.bs.table事件,但他们甚至看不到第一次加载。

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

3 个答案:

答案 0 :(得分:0)

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

CSS

body { opacity: 0 }

的jQuery

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

答案 1 :(得分:0)

尝试下面的代码行。

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

答案 2 :(得分:0)

我更新了你的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/