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

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

2 个答案: