我正在使用
Tablesaw plugin获取响应表.
在某些时候,我需要在Bootstrap Carousel的不同项目/幻灯片中包含不同的表格.
在加载时,Carousel的活动项目上的表格将正确显示(Tablesaw正确启动),但是一旦我移动到下一个幻灯片/项目,其中的表格将无法正确显示(Tablesaw未启动).
Tablesaw包含一个额外的JS文件,可在加载时启动：
$( function(){
$( document ).trigger( "enhance.tablesaw" );
});
这似乎适用于第一张幻灯片/项目,但不适用于其余部分.
有关为什么会发生这种情况的任何线索？
解决方法
问题出在Tablesaw初始化中. Tablesaw需要在初始化期间(在tablesaw-init.js中完成)知道元素的大小.你有两个tableaw元素放在bootstrap Carousel中,而一个是活动的而另一个不是.当您查看Carousel css时,您可以看到Carousel项目的当前未激活的显示属性设置为none.未显示的元素的宽度和高度设置为0.
所以解决方案可能是将文件tablesaw-init.js中的代码更改为：
;(function($) {
$(function(){
// Show all carousel items before Tablesaw intialization
$(".carousel-inner > .item").css("display","block");
// Initialize the Tablesaw
$( document ).trigger( "enhance.tablesaw" );
// Remove the style added before initialization
$(".carousel-inner > .item").removeAttr("style");
});
})(jQuery);
在此更改之后,无需处理滑动事件.
这是您提到的更改的原始代码示例,因此您可以看到它正在运行https://plnkr.co/edit/Ocd0axmKLS1KDtGYlU4K?p=preview
