我有一个相当大的表正在使用这个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/ 每次单击“运行”时,表格都会显示没有任何样式和复选框,只需一瞬间。
答案 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;
}
}