Datatables：テーブルの高さを変更しない

bPaginate = falseでsqurollYを指定したJquery Datatablesテーブルを使用していますが、sScrollYは固定高さです。最終的には、window.resizeイベントでテーブルのサイズを変更します。次のコードスニペットでは、私は、テーブルのサイズを変更したい、私はボタンをDatatables：テーブルの高さを変更しない

HTMLをクリックすると：：

<!DOCTYPE html> 
<html> 
<head> 
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> 
<script type="text/javascript" language="javascript" src="http://www.datatables.net/release-datatables/media/js/jquery.dataTables.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <input id="button" type="button" value="Click me!" /> 
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
    <thead> 
     <tr> 
      <th>Rendering engine</th> 

      <th>Browser</th> 
      <th>Platform(s)</th> 
      <th>Engine version</th> 
      <th>CSS grade</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="odd gradeX"> 
      <td>Trident</td> 
      <td>Internet 
       Explorer 4.0</td> 
      <td>Win 95+</td> 
      <td class="center"> 4</td> 
      <td class="center">X</td> 

     </tr> 
     <tr class="even gradeC"> 
      <td>Trident</td> 
      <td>Internet 
       Explorer 5.0</td> 
      <td>Win 95+</td> 
      <td class="center">5</td> 
      <td class="center">C</td> 

     </tr> 
     <tr class="odd gradeA"> 
      <td>Trident</td> 
      <td>Internet 
       Explorer 5.5</td> 
      <td>Win 95+</td> 
      <td class="center">5.5</td> 
      <td class="center">A</td> 

     </tr> 
    </tbody> 
    <tfoot> 
     <tr> 
      <th>Rendering engine</th> 
      <th>Browser</th> 
      <th>Platform(s)</th> 

      <th>Engine version</th> 
      <th>CSS grade</th> 
     </tr> 
    </tfoot> 
</table> 
    </body> 
</html>

Javascriptを：

をこれは私が小さなテストケースを構築しています動作させるために

$('#button').click(function() { 
    console.log('Handler for .click() called.'); 
    table = $('#example').dataTable(); 
    settings = table.fnSettings(); 
    console.log('old:' + settings.oScroll.sY); 
    settings.oScroll.sY = '150px'; 
    console.log('new:' + settings.oScroll.sY); 
    table.fnDraw(false); 
}); 
$('#example').dataTable({ 
    "sScrollY": "350px", 
    "bPaginate": false, 
    "bJQueryUI": true 
});

コンソール出力が期待通りです：

Handler for .click() called. 
old:350px 
new:150px

テーブルは更新されません！私が間違って何をしているのか？

ライブの例では、ここで見つけることができます：http://jsbin.com/anegiw/12/edit

出典

2011-10-06 dwergkees

"bDestroy"を設定しようとします。true –

これは、テーブルを再初期化するため、この特定のスニペットで機能する可能性があります。しかし、broserウィンドウのサイズ変更中に何度も呼び出されるwindow.resizeイベントハンドラには適していますか？ – dwergkees

実際には、私はwindow.resizeイベントで試してみました：それは動作しますが、現代のマシンでさえ非常に遅いです – dwergkees

OKがdatatbablesフレームワークによって追加された要素の中にタップを行うことです。

$(window).resize(function() { 
    console.log($(window).height()); 
    $('.dataTables_scrollBody').css('height', ($(window).height() - 200)); 
}); 

$('#example').dataTable({ 
    "sScrollY": ($(window).height() - 200), 
    "bPaginate": false, 
    "bJQueryUI": true 
});

この例では、テーブルには、ウィンドウとスムーズにサイズを変更することができます。

ライブ例：http://jsbin.com/anegiw/18/edit

出典

2011-10-07 18:48:36 dwergkees

それはsScrollY値のみを初期化で、テーブルのサイズを設定し、値を変更すると、それがテーブルに存在しない場合があります。その値は、「この量のスクロール後に結果をより多くレンダリングする」というデータテーブルを指示するためだけに使用されるため、sScrollYを更新するファサードを作成し、そのテーブルのCSS幅を希望の高さに手動で更新する必要があります。うまく動作するように思われるもの

出典

2011-10-06 20:57:20

それは多くを説明するでしょうが、他の質問があります、仕事：http://stackoverflow.com/questions/7634066/how-to-dynamically-change-jquery-data-tables-height – dwergkees

は、これは私のためにそれを修正：

#data_wrapper.dataTables_wrapper 
{ 
    height: 700px !important; 
    background-color: #F1F1F1 !important; 
} 
#data_wrapper .fg-toolbar.ui-toolbar.ui-widget-header.ui-helper-clearfix.ui-corner-bl.ui-corner-br 
{ 
     position: absolute; 
     width: 100%; 
     bottom: 0; 
}

をあなたは、レコードのあなたの番号ごとに高さを変更することができます。

出典

2014-09-05 16:44:36

Datatables：テーブルの高さを変更しない

答えて

関連する問題