Search code examples
twitter-bootstrap-3tablesorter

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

I read tablesorter pager not updating and tablesorter issue tabs zebra widget and other resources but it doesn't help me.

My tables on two tabs will not show. Only if I reload the page with one of the table tab active I can see this tab table (not the other table on the other tab).

tablesorter 2.26.6
jquery 2.2.3
bootstrap 3.3.6
templatetoolkit 2.24

The [% ... %] is the templatetoolkit language I used to build the webpage or tables.

I have a page with seven tabs (createt with bootstraps class="nav nav-tabs" and 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>

Two of this tabs has a table with a unique id and connected to tablesorter.

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

My second tab has a other table (like the first) with id="fsi_xpnet"

My javascript section for this two tables and tablesorter:

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

At github issue I found a tip, that I must bind a event. But I do not unterstand how this works or why it not works on my page. I add the following javascript code to my <script> section above:

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

If I start the firefox inspector I can see, that the source ok (dark source, not gray) and the I can see where the table is located - but I see only white space:

no table shown

Regards
Jochen

Solution

  • It looks like the issue is because the scroller widget isn't updating itself when the "applyWidgets" is used. It is actually waiting for the window to resize before it resets the size of the scroller window, which is set to zero because the tab was hidden. This has been fixed in the master branch of the repository and will be available in the next release.

    In the mean time, you can trigger a window resize to get the tabs to update (demo)

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

    So the reason why the above code is needed, is because the zebra is only looking to add a stripe to visible rows. When the table is hidden inside a tab, no zebra striping is applied. The above code listens to the bootstrap tab script to detect when the user switches tabs. It then updates all of the widgets, in which case the zebra widget will now detect visible rows and add stripes.

    The scroller widget automatically adjusts the width of the scroll window based on the table width. When the table is hidden inside of non-visible tab content, the table width is zero. So the scroller sets it to zero. The widget is looking for a window resize before it updates, so that is why we trigger that event. Again, the extra window resize code will not be necessary after the next release.