jquery Tablesorter滚动不起作用引导模式答案

【问题标题】：jquery Tablesorter scrolling not working bootstrap modaljquery Tablesorter滚动不起作用引导模式
【发布时间】：2016-12-25 02:00:23
【问题描述】：

我在引导模式中将表格显示为 jquery 表格排序器。它工作正常排序和所有。但是当添加滚动小部件时，模式变为空白，没有显示，

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

【问题讨论】：

这和php有什么关系？

标签： php jquery twitter-bootstrap tablesorter

【解决方案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;
}

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

【讨论】：