Javascript 响应选项卡内的引导响应表

在内部使用，调整大小后出现问题。如果将页面加载到桌面上，则在调整屏幕大小之前，一切都会按预期进行。一旦调整屏幕大小，选项卡中的表格就不再起作用。这两种方式都适用，就好像在浏览器窗口收缩的情况下加载页面一样，表将在响应选项卡内工作，但当您展开窗口时，它们会断开

已将该问题转载于

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

$(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>

---

出现此问题的原因是，当Boostrap响应选项卡更改显示模式选项卡或accordion时，它会从选项卡中删除所有HTML内容并将其附加到accordion，反之亦然。 因此footable使用的javascript事件被删除到

为了使其正常工作，每次Boostrap响应选项卡更改显示模式时，您必须重新初始化footable on resize

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

---

实时演示：

出现此问题的原因是，当Boostrap响应选项卡更改显示模式选项卡或accordion时，它会从选项卡中删除所有HTML内容并将其附加到accordion，反之亦然。 因此footable使用的javascript事件被删除到

为了使其正常工作，每次Boostrap响应选项卡更改显示模式时，您必须重新初始化footable on resize

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

现场演示：