数据表:改变表的高度不工作
Datatables: Change height of table not working
我使用Jquery数据表与bPaginate = false和sScrollY是一些固定的高度。最后,我希望表格在窗口上调整大小。调整大小事件。
为了让它工作,我已经构建了一个较小的测试用例:在以下代码片段中,我希望当我单击 按钮时,表可以调整大小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
下面的方法看起来很有效:
$(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
可能的情况是,sScrollY值仅在初始化时设置表的大小,然后当您更改该值时,它不会驻留在表中。该值可能仅用于告诉数据表"在此数量的滚动后呈现更多结果",因此您可能必须创建一个facade来更新sScrollY,然后手动更新该表的css宽度到所需的高度。
这为我修复了它:
#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;
}
您可以根据记录的数量更改高度。
相关文章:
- JQuery.animate();不以固定高度工作
- 动态潜水高度jQuery.Load()不工作
- 图片's的高度与手机/平板电脑的高度相同-只能在Chrome中正常工作
- 最大高度转换不;不工作,工作缓慢
- CSS转换don't工作(高度和边距)
- 如何使JQuery同位素与改变高度的元素一起工作
- 如何使最大宽度和高度与Jquery ImgViewer插件一起工作
- JS检测浏览器宽度和高度在Chrome中的工作;Safari,但不是IE9或FF9
- 风格.高度不工作javascript
- 在TextArea的自动大小上调整计算高度,理想地工作吗?(jsfiddle - updated)
- iframe自动高度调整在IE中不能很好地工作
- 滑块未达到工作高度
- 框架工作,但高度总是增加
- html值为don'的Extjs5显示字段;不能工作自动高度
- 数据表:改变表的高度不工作
- 你如何得到解决方案的屏幕宽度和高度工作
- Dojo DataGrid高度调整不工作
- Iframe高度调整不工作
- 对话框中的选项卡会导致对话框's高度:自动不工作
- 为什么这个高度匹配功能不能正常工作