调整窗口大小时如何使用jquery为数据表元素分配高度

Question

我正在使用 jquery 数据表来显示数据。在身体上使用以下代码加载其设置高度

<table id="RequestsTable" cellpadding="0" cellspacing="0" border="0" class="display" style="width:100%;">

在脚本中，我写下了以下代码。 ScrollY 根据窗口高度计算高度，并在表单加载时分配给数据表。

<script type="text/javascript">
var scrollY = $(window).height()*58/100;

var oTable = $('#RequestsTable').dataTable({
    "sScrollY": scrollY,
    "bPaginate": true,
    "bScrollCollapse": true,

    } );

当窗口调整大小并分配给数据表时，我想再次计算高度。 我尝试了以下代码，但对我不起作用。

var scrollY = $(window).height()*58/100;    
$(window).resize(function () {  
scrollY = $(window).height()*58/100;
});

    var oTable = $('#RequestsTable').dataTable({
        "sScrollY": scrollY,
        "bPaginate": true,
        "bScrollCollapse": true,

        } );

任何人都有任何想法可以实现这一点。 提前致谢。

我试过了，但没有成功

function calcDataTableHeight () {
    return $(window).height()*58/100;
};

$(window).resize(function () {

   var oSettings = oTable.fnSettings();
    oSettings.sScrollY = calcDataTableHeight();
    oTable.fnDraw();
});

var oTable = $('#reqAllRequestsTable').dataTable({
    "sScrollY": calcDataTableHeight()});

还有其他方法可以使用 css 设置高度吗？？

Answer 1

仅更新变量是不够的，您需要将新高度传递给数据表插件（因为它不会在变量内容更改时自动更新）：

var $window = $(window);

var calcDataTableHeight = function() {
    return Math.round($window.height() * 0.58);
};

var oTable = $('#RequestsTable').dataTable({
    "sScrollY": calcDataTableHeight(),
    "bPaginate": true,
    "bScrollCollapse": true,
});

$window.resize(function() {
    var oSettings = oTable.fnSettings();
    oSettings.oScroll.sY = calcDataTableHeight(); // <- updated!

    // maybe you need to redraw the table (not sure about this)
    oTable.fnDraw(false);
});