Twitter bootstrap 3 表排序器（mottie fork）/引导选项卡=>；如果使用其他活动选项卡重新加载，则不会显示选项卡上的表

我阅读和阅读其他资源，但这对我没有帮助

两个选项卡上的“我的表格”将不显示。只有在其中一个表选项卡处于活动状态时重新加载页面，我才能看到此选项卡表（而不是另一个选项卡上的另一个表）

tablesorter 2.26.6
jquery 2.2.3
引导程序3.3.6
templatetoolkit 2.24

[%…%]

是我用来构建网页或表格的templatetoolkit语言

我有一个包含七个选项卡的页面（使用引导创建

class=“nav nav tabs”

和

class=“tab content”

）：

在我找到一个提示，我必须绑定一个事件。但我并不理解它是如何工作的，也不理解它为什么不在我的页面上工作。我将以下javascript代码添加到上面的

部分：

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

如果我启动firefox inspector，我可以看到源代码正常（暗源代码，不是灰色），并且我可以看到表的位置-但我只看到空白：

问候

---

Jochen

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

同时，您可以触发窗口调整以更新选项卡（）

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

---

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

Mottie，上面的代码工作正常，现在我无法接受。谢谢你的支持！我在git上尝试您的版本（包括commit 84180c1），并删除上面的代码=>这不起作用。嗯，是的，内部表没有更新。请让我跟踪问题。Mottie已使用新版本（$（window）.resize（）修复；不需要，请使用版本2.27.1-thnx进行检查

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

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

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

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