Bootstrap 响应式标签内的响应式表格

Question

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

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

为了使其正常工作，每次 "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/

Bootstrap 响应式标签内的响应式表格

Bootstrap responsive tables inside responsive tabs

html

javascript

css

responsive-design

twitter-bootstrap