tablesorter (mottie fork) / bootstrap 标签 => table 如果使用其他活动标签重新加载，标签上将不会显示

Question

我阅读了 and tablesorter issue tabs zebra widget 和其他资源，但对我没有帮助。

我在两个选项卡上的 tables 将不会显示。只有在 table 选项卡处于活动状态的情况下重新加载页面时，我才能看到此选项卡 table（不是另一个选项卡上的另一个 table）。

table分拣机 2.26.6
jquery2.2.3
bootstrap3.3.6
模板工具包 2.24

[% ... %]是我用来构建网页或tables的templatetoolkit语言。

我有一个包含七个选项卡的页面（带有 bootstraps class="nav nav-tabs" 和 class="tab-content" 的创建）：

     <ul class="nav nav-tabs" id="myTabs">
        <li class="active"><a href="#pool_srv" data-toggle="tab">Server List</a></li>  
        <li><a href="#pool_net" data-toggle="tab">Network Config</a></li>  
        <li><a href="#pool_storage" data-toggle="tab">Storage Config</a></li> 
        .
        .
     </ul>

     <div id="myTabs" class="tab-content">
        <div style="height: 620px;" class="tab-pane active" id="pool_srv">[% INCLUDE 'view-xp/srv.tt' %]</div>
        <div style="height: 620px;" class="tab-pane" id="pool_net">[% INCLUDE 'view-xp/net.tt' %]</div>
        <div style="height: 620px;" class="tab-pane" id="pool_storage">[% INCLUDE 'view-xp/sr.tt' %]</div>
        .
        .
     </div>
  </div>

其中两个选项卡的 table 具有唯一 ID 并连接到 tablesorter。

第一个table:

<table id="fsi_xpsr" class="tablesorter table table-condensed table-hover table-striped" >
<thead>
      <tr class="fsitableheader">
           <th width="220px">sr name</th>
           <th width="50px ">typ</th>
           <th width="200px">shared</th>               
           <th width="768px">description</th>
  </tr>
</thead>
<tbody>
        [% FOREACH uuid IN srs.keys.sort %]
           <tr>
              <td width="220px">[% srs.$uuid.item('name-label') %]</td>
              <td width="50px ">[% srs.$uuid.item('type') %]</td>
              <td width="200px">[% srs.$uuid.item('host') %]</td>
              <td width="768px">[% srs.$uuid.item('name-description') %]</td>
           </tr>
        [% END %]
</tbody>

我的第二个选项卡有另一个 table（和第一个一样）id="fsi_xpnet"

我的 javascript 这两个 table 和 table 分类器的部分：

<script>
$(document).ready(function () {
   $("#fsi_xpnet")
       .tablesorter({
         theme: "bootstrap",
         showProcessing   : true, 
         headerTemplate: '{content} {icon}',
         widthFixed: true,
         widgets: ["storage", "saveSort", "uitheme", "filter", "scroller"],
         widgetOptions: {
            filter_reset : 'button.reset',
            filter_hideFilters: false,
            filter_ignoreCase: true,
            filter_saveFilters: true,
            filter_cssFilter: "form-control",
            scroller_height: 578,
            scroller_upAfterSort: false,
            scroller_jumpToHeader: false,
         }
   });

   $("#fsi_xpsr")
       .tablesorter({
         theme: "bootstrap",
         showProcessing   : true, 
         headerTemplate: '{content} {icon}',
         widthFixed: true,
         widgets: ["storage", "saveSort", "uitheme", "filter", "scroller"],
         widgetOptions: {
            filter_reset : 'button.reset',
            filter_hideFilters: false,
            filter_ignoreCase: true,
            filter_saveFilters: true,
            filter_cssFilter: "form-control",
            scroller_height: 578,
            scroller_upAfterSort: false,
            scroller_jumpToHeader: false,
         }
   });

在 github issue 我发现了一个提示，我必须绑定一个事件。但我不明白这是如何工作的，也不知道为什么它在我的页面上不起作用。我将以下 javascript 代码添加到上面的 <script> 部分：

   $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
       $('.tab-pane.active').find('table').trigger('applyWidgets');
   });

如果我启动 firefox 检查器，我可以看到源正常（暗源，不是灰色）并且我可以看到 table 的位置 - 但我只看到白色 space:

此致
约臣

Answer 1

问题似乎是因为在使用 "applyWidgets" 时滚动条小部件没有自行更新。它实际上是在等待 window 调整大小，然后再重置滚动条 window 的大小，因为选项卡被隐藏，滚动条被设置为零。这已在存储库的 master 分支中修复，并将在下一个版本中提供。

与此同时，您可以触发 window 调整大小以使选项卡更新 (demo)

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $('.tab-pane.active').find('table').trigger('applyWidgets');
    $(window).resize();
});

之所以需要上面的代码，是因为斑马只是想在可见行中添加条纹。当 table 隐藏在选项卡内时，不会应用斑马条纹。上面的代码侦听 bootstrap 选项卡脚本以检测用户何时切换选项卡。然后它会更新所有小部件，在这种情况下，斑马小部件现在将检测可见行并添加条纹。

滚动条小部件会根据 table 宽度自动调整滚动条的宽度 window。当 table 隐藏在不可见的选项卡内容中时，table 宽度为零。所以滚动条将它设置为零。小部件在更新之前正在寻找 window 调整大小，因此这就是我们触发该事件的原因。同样，在下一个版本之后将不再需要额外的 window 调整大小代码。

tablesorter (mottie fork) / bootstrap 标签 => table 如果使用其他活动标签重新加载，标签上将不会显示

tablesorter (mottie fork) / bootstrap tabs => table on tabs will not show if reload with a other active tab

tablesorter

twitter-bootstrap-3