0

アプリケーションに複数のタブがあり、複数のデータテーブルがあります。

画面サイズに基づいてデータテーブルの高さを調整する方法を見つけようとしています。

以下の機能を試してみましたが、ウィンドウのサイズを変更してもデータテーブルの高さが増えないようです。何か提案は非常に役に立ちますか?

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

2 に答える 2

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;
};
于 2013-01-03T18:45:46.047 に答える
0

私はこれを使用しましたが、うまくいきました

$(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();
    });
});
于 2013-01-09T09:59:35.270 に答える