Javascript 如何动态更改 jQuery 数据表的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7634066/
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
How to dynamically change jQuery Datatables height
提问by xyz
I'm using jQuery Datatables. I want to change the height of the table whenever a user resizes the window. I'm able to catch the window resize event which allows me to calculate the new height. How can I assign the new height to the datatable object?
我正在使用 jQuery数据表。每当用户调整窗口大小时，我都想更改表格的高度。我能够捕获窗口调整大小事件，它允许我计算新的高度。如何将新高度分配给数据表对象？
回答by Raje
You can use the following code:
您可以使用以下代码：
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();
});
回答by rynop
The current answer didn't work for me (using v 1.9.1). I think this solution not only works but will perform better (and is based on the author's suggestion). This example is using smartresizeto solve cross browser window re-size issues.
当前的答案对我不起作用（使用 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();
});
回答by Robert Mauro
Using newer versions of Datatables, there's other methods, which, when combined with the judicious use of a timer for watching the resize event triggers, works pretty well. I've left the "ancient" "window.location.reload()" line in for those who are stuck running older versions of DataTables - simply uncomment it and comment out the "table.draw()" call.
使用较新版本的数据表，还有其他方法，当结合明智地使用计时器来观察调整大小事件触发器时，效果非常好。对于那些被困在运行旧版本 DataTables 的人，我已经留下了“古老的”“window.location.reload()”行 - 只需取消注释并注释掉“table.draw()”调用。
Side note, the documentation says the correct call is "table.Draw()" - that is not the case on the version I am using (call is all lowercase).
旁注，文档说正确的调用是“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
});
That's it.
就是这样。
回答by Nikolay Makhalin
For DataTables 1.10:
对于数据表 1.10：
$("#table").DataTable( {
scrollY: '250px',
scrollCollapse: true,
paging: false,
});
$('#table').closest('.dataTables_scrollBody').css('max-height', '500px');
$('#table').DataTable().draw();
When you changed CSS you must call draw().
当您更改 CSS 时，您必须调用draw().
回答by Shrash
Simply put it like this:
简单地说就是这样：
$('#example').dataTable({
"sScrollY": "auto"
});
回答by vineet
This is work for me
这对我来说是工作
$(document).ready(function () {
$('#dataTable1').dataTable({
"scrollY": 150,
"scrollX": 150
});
$('.dataTables_scrollBody').height('650px');
});
回答by ricks
Here is a simple solution as documented here
这是此处记录的简单解决方案
$(document).ready(function() {
$('#example').DataTable( {
scrollY: '50vh',
scrollCollapse: true,
paging: false
});
});
vh Relative to 1% of the height of the viewport*
vh 相对于视口高度的 1%*
You can use the vh unitto set a height that varies based on the size of the window.
您可以使用vh 单位设置根据窗口大小而变化的高度。
Supported in: Chrome 20.0+, IE 9.0+, FireFox 19.0+, Safari 6.0+, Opera 20.0+
支持：Chrome 20.0+、IE 9.0+、FireFox 19.0+、Safari 6.0+、Opera 20.0+
回答by Nicola Peluchetti
I think you can change the height of the table by css
我认为您可以通过 css 更改表格的高度
$(window).resize(function(){
$('#yourtable').css('height', '100px');
});
