jquery Tablesorter scrolling not working bootstrap modal

问题

I am displaying table as jquery tablesorter in bootstrap modal. It's working fine sorting and all. But when adding scrolling widget the modal becomes blank, nothing displaying,

$('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_'
    }
});

回答1:

Make sure to add the table inside the <div class="modal-body">, then compare these two demos:

• 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();
    });
  });
  

来源：https://stackoverflow.com/questions/39013101/jquery-tablesorter-scrolling-not-working-bootstrap-modal