什麼是在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 parameter..sample下面片斷中，高度...

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