jQuery Tablesorter滚动不起作用引导模态 [英] jquery Tablesorter scrolling not working bootstrap modal

问题描述

我正在引导模态中将表显示为jquery tablesorter.一切工作正常.但是，当添加滚动小部件时，模式变为空白，不显示任何内容，

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

推荐答案

确保将表添加到<div class="modal-body">内，然后比较以下两个演示:

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

• Bootstrap模式中的卷轴控件

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

Bootstrap模式中的stickyHeaders小部件

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

这篇关于jQuery Tablesorter滚动不起作用引导模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！