Datatables：更改高度表不工作

我正在使用bPaginate = false的jquery數據表，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 –

這將重新初始化表，因此它可能適用於此特殊片段。但是對於window.resize事件處理程序來說是否合適，在處理broser窗口的過程中會多次調用這個事件處理程序？ – dwergkees

其實，我剛剛在window.resize事件中試過它：它的工作原理很慢，即使是在現代機器上也是如此 – dwergkees

好了什麼，似乎很好地工作是做水龍頭到由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：更改高度表不工作

回答

相關問題