Question

在footable内使用Boostrap Responsive Tabs并在调整大小后出现问题。如果您在桌面上加载页面，一切都会按预期工作，直到您调整屏幕大小。一旦调整屏幕大小，选项卡中的表就不再起作用。这有两种方式，就像你在浏览器窗口加载页面时缩小表格将在响应选项卡内部工作，但是当你展开窗口时它们就会中断。

已在jsfiddle

中复制了该问题

（外部资源可以在小提琴上找到）

$(document).ready(function(){

    fakewaffle.responsiveTabs(['xs']);
    $('.footable').footable();

});

<div class="row">
<div class="col-lg-12"> 
    <div class="bs-component">
        <ul class="nav nav-tabs responsive">
            <li class="active">
                <a data-toggle="tab" href="#tab1">This</a>
            </li>
            <li>    
                <a data-toggle="tab" href="#tab2">Is</a>
            </li>
            <li>
                <a data-toggle="tab" href="#tab3">My</a>
            </li>
            <li>
                <a data-toggle="tab" href="#tab4">Boomstick!</a>
            </li>
         </ul>

        <div class="tab-content">
            <div id="tab1" class="tab-pane fade active in">
                <table class="table table-striped table-bordered table-hover footable toggle-medium">
                    <thead>
                         <th>Identifier</th>
                         <th data-hide="all">Column2</th>
                         <th data-hide="all">Column3</th>
                     </thead>
                     <tbody>
                         <tr>
                             <td>Clickme</td>
                             <td>Okay</td>
                             <td>Whatever</td>
                          </tr>
                          <tr>
                             <td>Second Row</td>
                             <td>Still Okay</td>
                             <td>Still Whatever</td>
                          </tr>
                     </tbody>
                 </table>
             </div>
             <div id="tab2" class="tab-pane fade active">
                <table class="table table-striped table-bordered table-hover footable toggle-medium">
                    <thead>
                         <th>Identifier</th>
                         <th data-hide="all">Column2</th>
                         <th data-hide="all">Column3</th>
                     </thead>
                     <tbody>
                         <tr>
                             <td>Clickme</td>
                             <td>Okay</td>
                             <td>Whatever</td>
                          </tr>
                          <tr>
                             <td>Second Row</td>
                             <td>Still Okay</td>
                             <td>Still Whatever</td>
                          </tr>
                     </tbody>
                 </table>
             </div>
        </div>
    </div>
</div>

Answer 1

出现此问题是因为当“Boostrap Responsive Tabs”更改显示模式（制表符或手风琴）时，它会从选项卡中删除所有HTML内容并将其附加到手风琴，反之亦然。因此，footable使用的javascript事件将被删除。

为了使其有效，每次“Boostrap Responsive Tabs”改变显示模式时，您必须在重新调整大小时重新初始化。

var panelView = $('.panel-group.responsive').is(':visible');    
$( window ).resize( function () {
    if ( $('.panel-group.responsive').is(':visible') != panelView ) {
        $('.footable').removeClass('footable-loaded').footable();
        panelView = $('.panel-group.responsive').is(':visible');
    }
} );

现场演示：http://jsfiddle.net/us7hgf3g/

响应选项卡内的Bootstrap响应表

1 个答案: