javascript - 在响应选项卡内 Bootstrap 响应表

Question

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

已在 jsfiddle 中重现该问题

(外部资源可以在fiddle上找到)

$(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”更改显示模式(选项卡或 Accordion )时，它会从您的选项卡中删除所有 HTML 内容并将其附加到 Accordion ，反之亦然。 因此 footable 使用的 javascript 事件被删除。

为了使其正常工作，每次“Boostrap Responsive Tabs”更改显示模式时，您都必须重新初始化 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');
    }
} );

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