Question

我阅读了tablesorter pager not updating和tablesorter issue tabs zebra widget以及其他资源，但这对我没有帮助。

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

tablesorter 2.26.6
jquery 2.2.3
bootstrap 3.3.6
templatetoolkit 2.24

[% ... %]是我用来构建网页的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>

其中两个标签有一个具有唯一ID的表，并连接到tablesorter。

第一张表：

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

我的第二个标签有另一个表格（与第一个标签一样）id="fsi_xpnet"

这两个表和tablesorter的javascript部分：

<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检查器，我可以看到，源ok（暗源，而不是灰色），我可以看到表的位置 - 但我只看到空格：

问候
约亨

Answer 1

看起来这个问题是因为滚动小部件在＆＃34; applyWidgets＆＃34;用来。实际上它正在等待窗口调整大小，然后重置滚动窗口的大小，由于隐藏了选项卡，因此将其设置为零。这已在存储库的主分支中修复，并将在下一版本中提供。

同时，您可以触发窗口调整大小以使标签更新（demo）

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

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

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

tablesorter（mottie fork）/ bootstrap tabs =＆gt;如果使用其他有效标签

1 个答案: