在Bootstrap 3中未初始化 [英] footable in bootstrap 3 not initializing

问题描述

我尝试通过twitter bootstrap集成的出色的便捷插件未初始化.就是说，感谢我的萤火虫检查器，我可以看到该表是由适用的插件处理的，但是我一直想隐藏的行:

the excellent footable plugin I'm trying to integrate in by twitter bootstrap doesn't initialize. That is to say, thank to my firebug inspector, I can see the table is handled by footable plugin but the row I always want to be hidden :

data-hide="all"

是可见的.如果更改浏览器的大小，则该表具有我期望它在页面启动时应具有的行为.

are visible. If I change my browser's size, then the table has the behavior I'm expecting it should have at page startup.

我尝试使用firefox/chrome和其他jQuery版本，但仍然相同！

I've tryed in firefox/chrome and different jQuery version but still the same !

我以最简单的示例为例，看看发生了什么，但是再没有运气了！据说footable正在与bootstrap一起工作.

I've took the simplest footable example to see what was happening but no more luck ! It's said footable is working together with bootstrap out of the box.

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

I'm loading a huge quantity of scripts on my page using requireJS but not an error around this. I can't understand how the table could be recognized by footable but it's properties not activates !

感谢您进行任何调查！

Thanks for any way of investigation !

我了解问题出在我的表是页面加载时的隐藏div中(使用引导程序向导)，因此添加:

EDIT : I've understood the problem comes from my table is in an hidden div at page load (using bootstrap wizard) so adding :

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

}

成功了:)

推荐答案

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

It is because fooTable cannot tell the size of the screen when it is in a hidden div/tab.

使用以下jQuery:

Use the following 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'); 
    });
}); 

这篇关于在Bootstrap 3中未初始化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！