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

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

标签

php

jquery

twitter-bootstrap

tablesorter