如何动态更改jQuery数据表的高度
如何动态更改jQuery数据表的高度
提问于 2011-10-03 18:56:24
我正在使用jQuery Datatables。每当用户调整窗口大小时，我都想更改表格的高度。我能够捕捉调整窗口大小的事件，它允许我计算新的高度。如何将新的高度分配给datatable对象？
回答 6
Stack Overflow用户
回答已采纳
发布于 2011-10-03 20:10:55
您可以使用以下代码：
var calcDataTableHeight = function() {
return $(window).height() * 55 / 100;
};
var oTable = $('#reqAllRequestsTable').dataTable({
"sScrollY": calcDataTableHeight();
});
$(window).resize(function() {
var oSettings = oTable.fnSettings();
oSettings.oScroll.sY = calcDataTableHeight();
oTable.fnDraw();
});Stack Overflow用户
发布于 2012-06-20 22:48:14
当前的答案对我不起作用(使用1.9.1版)。我认为这个解决方案不仅有效，而且性能会更好(and is based on the author's suggestion)。此示例使用smartresize解决跨浏览器窗口重新调整大小的问题。
var defaultOptions = {...};//your options
var calcDataTableHeight = function() {
//TODO: could get crazy here and compute (parent)-(thead+tfoot)
var h = Math.floor($(window).height()*55/100);
return h + 'px';
};
defaultOptions.sScrollY = calcDataTableHeight();
var oTable = this.dataTable(defaultOptions);
$(window).smartresize(function(){
$('div.dataTables_scrollBody').css('height',calcDataTableHeight());
oTable.fnAdjustColumnSizing();
});Stack Overflow用户
发布于 2016-03-17 21:27:18
使用较新版本的Datatables，还有其他方法，当结合使用计时器来监视resize事件触发器时，效果非常好。我把“古老的”"window.location.reload()“这行代码留给那些运行旧版本DataTables的人--只需取消注释它，并注释掉"table.draw()”调用。
顺便说一下，文档说正确的调用是"table.Draw()“--在我使用的版本中不是这样的(调用都是小写的)。
$(window).on('resize', function(e)
{
if (typeof resizeTimer !== 'undefined') {
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(function()
{
// Get table context (change "TABLENAME" as required)
var table = $('#TABLENAME').DataTable();
// Set new size to height -100px
$('.dataTables_scrollBody').css('height', window.innerHeight-100+"px");
// Force table redraw
table.draw();
// Only necessary for ancient versions of DataTables - use INSTEAD of table.draw()
// window.location.reload();
}, 250); // Timer value for checking resize event start/stop
});就这样。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7634066
复制相关文章
相似问题