jQuery Tablesorter滚动不起作用引导模态 [英] jquery Tablesorter scrolling not working bootstrap modal
本文介绍了jQuery Tablesorter滚动不起作用引导模态的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在引导模态中将表显示为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:
$(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
}
});
});
});
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屋!
查看全文