web-dev-qa-db-ja.com

jQuery Datatablesの高さを動的に変更する方法

私はjQuery Datatables を使用しています。ユーザーがウィンドウのサイズを変更するたびにテーブルの高さを変更したい。新しい高さを計算できるウィンドウサイズ変更イベントをキャッチできます。データテーブルオブジェクトに新しい高さを割り当てるにはどうすればよいですか？

javascriptjquerydatatables
17
xyz

次のコードを使用できます。

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

var oTable = $('#reqAllRequestsTable').dataTable({
  "sScrollY": calcDataTableHeight();
});

$(window).resize(function() {
  var oSettings = oTable.fnSettings();
  oSettings.oScroll.sY = calcDataTableHeight(); 
  oTable.fnDraw();
});
30
Raje

現在の答えは私にとってはうまくいきませんでした（v 1.9.1を使用）。この解決策はうまくいくだけでなく、パフォーマンスも向上すると思います（ そして著者の提案に基づいています ）。この例では smartresize を使用して、クロスブラウザーウィンドウのサイズ変更の問題を解決しています。

var defaultOptions = {...};//your options
var calcDataTableHeight = function() {
    //TODO: could get crazy here and compute (parent)-(thead+tfoot)
    var h = Math.floor($(window).height()*55/100);
    return h + 'px';
};

defaultOptions.sScrollY = calcDataTableHeight();

var oTable = this.dataTable(defaultOptions);

$(window).smartresize(function(){  
    $('div.dataTables_scrollBody').css('height',calcDataTableHeight());
    oTable.fnAdjustColumnSizing();
});
8
rynop

Datatablesの新しいバージョンを使用すると、サイズ変更イベントトリガーを監視するタイマーの賢明な使用と組み合わせると、かなりうまく機能する他のメソッドがあります。古いバージョンのDataTablesの実行に行き詰まっている人のために、「ancient」「window.location.reload（）」の行を残しました。コメントを外して「table.draw（）」の呼び出しをコメントアウトするだけです。

ちなみに、ドキュメントには正しい呼び出しが「table.Draw（）」であると記載されています-私が使用しているバージョンではそうではありません（呼び出しはすべて小文字です）。

$(window).on('resize', function(e) 
{
  if (typeof resizeTimer !== 'undefined') {
    clearTimeout(resizeTimer);
  }
  resizeTimer = setTimeout(function() 
  { 

    // Get table context (change "TABLENAME" as required)
       var table = $('#TABLENAME').DataTable();                                 

    // Set new size to height -100px
       $('.dataTables_scrollBody').css('height', window.innerHeight-100+"px");      

    // Force table redraw
       table.draw();        

    // Only necessary for ancient versions of DataTables - use INSTEAD of table.draw()
       // window.location.reload();
  }, 250);    // Timer value for checking resize event start/stop
});

それでおしまい。

5
Robert Mauro

DataTables 1.10の場合：

_            $("#table").DataTable( {
              scrollY: '250px',
              scrollCollapse: true,
              paging: false,
            });

            $('#table').closest('.dataTables_scrollBody').css('max-height', '500px');
            $('#table').DataTable().draw();
_

CSSを変更した場合は、draw()を呼び出す必要があります。

4
Nikolay Makhalin

単に次のように記述します。

$('#example').dataTable({
   "sScrollY": "auto"
});
3
Shrash

これは私のための仕事です

$(document).ready(function () {
            $('#dataTable1').dataTable({
                "scrollY": 150,
                "scrollX": 150
            });
            $('.dataTables_scrollBody').height('650px');
        });
1
vineet