bootstrap 3中的footable未初始化答案

【问题标题】：footable in bootstrap 3 not initializingbootstrap 3中的footable未初始化
【发布时间】：2015-12-12 07:43:36
【问题描述】：

我试图通过 twitter bootstrap 集成的优秀的footable 插件没有初始化。也就是说，感谢我的萤火虫检查员，我可以看到表格是由footable插件处理的，但我一直想隐藏的行：

data-hide="all"

可见。如果我更改了浏览器的大小，那么该表格将具有我期望它在页面启动时应该具有的行为。

我尝试过使用 firefox/chrome 和不同的 jQuery 版本，但还是一样！

我已经举了一个最简单的例子来看看发生了什么，但没有更多的运气！据说footable 与开箱即用的引导程序一起工作。

我正在使用 requireJS 在我的页面上加载大量脚本，但没有出现错误。我不明白footable如何识别表格，但它的属性没有激活！

感谢任何方式的调查！

编辑：我知道问题出在我的表在页面加载时隐藏的 div 中（使用引导向导），所以添加：

onTabShow: function(tab, navigation, index) {
if(index===3){
        $('.footable').trigger('footable_initialize');
}

}

成功了 :)

【问题讨论】：

标签： jquery twitter-bootstrap-3 footable

【解决方案1】：

这是因为fooTable在隐藏的div/tab中时无法分辨屏幕的大小。

使用以下 jQuery：

$(document).ready(function() { 
    $('.nav-tabs a').click(function (e) {
        //prevents re-size from happening before tab shown
        e.preventDefault();
        //show tab panel
        $(this).tab('show');  
        //fire re-size of footable
        $('.footable').trigger('footable_resize'); 
    });
});

【讨论】：

【解决方案2】：

您确实回答了有关使用引导向导的问题。最初的问题涉及footable。我有点挣扎，但使用shown.bs.tab 事件的解决方案很简单。

使用下面的 jQuery：

    $('.nav-tabs a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });

    $(function () {
        $('.footable').footable();
    });

    $("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
        //fire initialize of footable because the footable plugin only processes tables that are visible
        $('.footable').trigger('footable_initialize');
    });

【讨论】：

【解决方案3】：

您回答了自己的问题。 footable 插件只处理可见的表格。查看footable.js resize()方法中的代码

 if (!$table.is(':visible')) {
    return;
 } //we only care about FooTables that are visible

所以你是对的。要么确保选项卡完全可见，并且所有父级都可见，要么触发导致 footable 重置表的初始化事件。但也许最好重新初始化刚刚显示的表。

$('#myFooTable').trigger('footable_initialize');

【讨论】：