javascript - 在 window.resize 上动态设置数据表高度的最佳方法是什么？

Question

我的应用程序中有多个选项卡，其中包含多个数据表。

我正在尝试找出一种根据屏幕尺寸调整数据表高度的方法。

我尝试了以下功能，但调整窗口大小时似乎没有增加数据表的高度。有什么建议会很有帮助吗？

  var calcDataTableHeight = function(percentageValue) {
             return $(window).height()*(percentageValue)/100;
         };



$(window).resize(function() {
          var table = $.fn.dataTable.fnTables(true);
                if ( table.length > 0 ) {
                    for(var i=0;i<table.length;i++){
                        $(table[i]).dataTable().css({ height: $(table[i]).dataTable().parent().height() });
                        $(table[i]).dataTable().fnAdjustColumnSizing();  
                    }
                }
                }
     });

Answer 1

我想出了一种使用scrollY参数增加高度的方法......下面的示例片段......

$(window).resize(function() {
    var table = $.fn.dataTable.fnTables(true);
    if (table.length > 0) {
        for(var i = 0; i < table.length; i++) {
            $(table[i]).dataTable().fnSettings().oScroll.sY = 
                $(window).height() < 650 ? calcDataTableHeight(40) : calcDataTableHeight(54);
            $(table[i]).dataTable().fnAdjustColumnSizing();  
        }
    }
});

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

Answer 2

我用了这个，它奏效了

$(function(){
//set the main frame height on page load and page resize
    windowHeight = function windowHeight(){
        winHei = $(window).height()//window height without pixels
        $('div.clients-content').css('height', winHei - 130 + 'px');//dataTables container//130 is for my page design consider your own
        $('div.clients-content div.dataTables_scroll').css('height', winHei - 220 + 'px');//this is dataTable scroll container
        $('div.clients-content div.dataTables_scrollBody').css('height', winHei - 250 + 'px');//this is dataTable scroll body
    };
    windowHeight();
    $(window).resize(function(){
        windowHeight();
    });
});