在window.resize上动态设置数据表高度的最好方法是什么?

Whats the best way to set height of datatables dynamically on window.resize?

本文关键字：方法 是什么 高度 数据表 resize window 动态 设置      更新时间：2023-09-26

我的应用程序中有多个选项卡和多个数据表。

我正试图找出一种方法来调整基于屏幕大小的数据表的高度。

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

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

我想出了一种方法来增加使用滚动参数的高度…下面的示例代码片段…

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

我用了这个，它成功了

$(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();
    });
});
相关文章：