Javascript 数据表：更改表的高度不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7678345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Datatables: Change height of table not working
提问by dwergkees
I am using a Jquery Datatables table with bPaginate = false and sScrollY is some fixed height. Ultimately I want the table to resize on the window.resize event.
我正在使用带有 bPaginate = false 的 Jquery Datatables 表，并且 sScrollY 是一些固定高度。最终我希望表格在 window.resize 事件上调整大小。
To get this to work I have built a smaller testcase: In the following code snippets I want the table to resize when I click the button
为了让它发挥作用，我构建了一个较小的测试用例：在以下代码片段中，我希望在单击按钮时调整表格大小
HTML:
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:
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
});
Console output is as expected:
控制台输出符合预期：
Handler for .click() called.
old:350px
new:150px
but the table doesn't update! Any idea what I am doing wrong?
但表没有更新！知道我做错了什么吗？
A live example can be found here: http://jsbin.com/anegiw/12/edit
一个活生生的例子可以在这里找到：http: //jsbin.com/anegiw/12/edit
回答by dwergkees
Ok what seems to work nicely is to do tap into the elements added by the datatbables framework:
好的，似乎工作得很好的是利用 datatables 框架添加的元素：
$(window).resize(function() {
console.log($(window).height());
$('.dataTables_scrollBody').css('height', ($(window).height() - 200));
});
$('#example').dataTable({
"sScrollY": ($(window).height() - 200),
"bPaginate": false,
"bJQueryUI": true
});
This example lets the table resize smoothly with the window.
这个例子让表格随着窗口平滑地调整大小。
Live example: http://jsbin.com/anegiw/18/edit
回答by Keith.Abramo
It might be the case that the sScrollY value only sets the size of the table on initialize and then when you change the value it does not reside the table. That value might only be used to tell datatables "after this amount of scrolling render more results" so you might have to create a facade that updates the sScrollY and then manually updates the css width of that table to the desired height.
可能的情况是 sScrollY 值仅在初始化时设置表的大小，然后当您更改该值时，它并不驻留在表中。该值可能仅用于告诉数据表“在此滚动量后呈现更多结果”，因此您可能必须创建一个更新 sScrollY 的外观，然后手动将该表的 css 宽度更新为所需的高度。
回答by Waqas Ali Khan Puar
This fixed it for me:
这为我修复了它：
#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;
}
You can change the height as per your number of records.
您可以根据您的记录数量更改高度。
