jquery Tablesorter滾動不工作引導模態

Question

我顯示錶爲jquery tablesorter引導模式。它的工作很好分類和所有。但是，當添加滾動插件的模式變爲空白，沒有任何顯示，

$('table').tablesorter({ 
    theme: 'ice', 
    widthFixed: true, 
    showProcessing: true, 
    headerTemplate: '{content} {icon}', 
    widgets: ['zebra', 'uitheme', 'scroller'], 
    widgetOptions: { 
     scroller_height: 300, 
     scroller_barWidth: 17, 
     scroller_jumpToHeader: true, 
     scroller_idPrefix: 's_' 
    } 
}); 

Answer 1

確保添加表中的<div class="modal-body">裏面，然後比較這兩個演示：

• scroller widget in a Bootstrap modal

  $(function() { 
      $('#myModal').on('shown.bs.modal', function() { 
      $('#table0').tablesorter({ 
       theme: 'bootstrap', 
       headerTemplate: '{content} {icon}', // Add icon for various themes 
       widgets: ['zebra', 'filter', 'uitheme', 'scroller'], 
       widgetOptions: { 
       scroller_height: 300 
       } 
      }); 
      }); 
  }); 
  

• stickyHeaders widget in a Bootstrap modal

  CSS

  /* Bootstrap tweaks 
  adjust margin-top to accomodate for the Modal title block 
  adjust margin-left to tweak positioning 
  */ 
  .tablesorter-sticky-wrapper { 
      margin-top: -87px; 
      margin-left: -2px; 
  } 
  .modal-body { 
      overflow-x: auto; 
  } 
  

  JS

  $(function() { 
      $('#myModal').on('shown.bs.modal', function() { 
      $('#table0').tablesorter({ 
       theme: 'bootstrap', 
       headerTemplate: '{content} {icon}', // Add icon for various themes 
       widgets: ['zebra', 'filter', 'uitheme', 'stickyHeaders'], 
       widgetOptions: { 
       // jQuery selector or object to attach sticky header to 
       stickyHeaders_attachTo: '#myModal', 
       stickyHeaders_offset: 0, 
       stickyHeaders_addCaption: true 
       } 
      }); 
      // make sure the stickyHeader isn't showing the second 
      // time a modal is opened 
      $('#myModal').scroll(); 
      }); 
  });