javascript 如何根据浏览器缩放自动调整数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11269146/
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 automatically adjust a datatable based on the browsers zoom
提问by Pat Murray
I am wondering if there is a simple way to allow a JQuery datatable to re-size itself while the user is using a browsers zoom-in, zoom-out features. Currently When I zoom in and out on my data table the data either shrinks or grows too large for the table. And I also noticed that after I zoom out or in I can refresh the page and the datatable resizes itself to how it should look. Any insight or possible redirection to a question where this has been answered (could not find one) would be appreciated. Thanks.
我想知道是否有一种简单的方法可以让 JQuery 数据表在用户使用浏览器放大、缩小功能时重新调整自身大小。目前，当我放大和缩小我的数据表时，数据要么缩小，要么对表来说变得太大。而且我还注意到，在我缩小或放大之后，我可以刷新页面，并且数据表会自行调整大小以使其看起来应有的样子。任何见解或可能重定向到已回答的问题（找不到）将不胜感激。谢谢。
Here are my JavaScript table properties:
这是我的 JavaScript 表属性：
"bJQueryUI": true,
"bStateSave": true,
"iDisplayLength": 50,
"aaSorting": [[4, "desc"], [5, "asc"]],
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"sPaginationType": "full_numbers",
"sScrollY": "35em",
"sScrollX": "100%",
"bScrollCollapse": true
回答by David Stetler
You can tie a datables redraw event to a window re-size function:
您可以将数据重绘事件与窗口大小调整函数联系起来：
$(window).resize(function() {
oTable.fnDraw(false)
});
This assumes you initialized your table with the variable oTable like this:
这假设您使用变量 oTable 初始化您的表，如下所示：
var oTable = $("#tableName").dataTable({
"bJQueryUI": true,
"bStateSave": true,
"iDisplayLength": 50,
"aaSorting": [[4, "desc"], [5, "asc"]],
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"sPaginationType": "full_numbers",
"sScrollY": "35em",
"sScrollX": "100%",
"bScrollCollapse": true
});
回答by Nenotlep
You could also set the table in question to have style="width:100%;"and then use the "bAutoWidth":falseoption for DataTables. It then maintains your width and you don't actually need a redraw. Especially for tables doing complex Server side processing tables, this is quite a bit lighter. For the HTML just change the style
您还可以设置有问题的表style="width:100%;"，然后使用"bAutoWidth":falseDataTables 选项。然后它会保持您的宽度，而您实际上并不需要重绘。特别是对于做复杂的服务器端处理表的表，这要轻得多。对于 HTML 只需更改样式
<table id="tableName" style="width:100%;">...</table>
And then your DataTables add the option:
然后你的数据表添加选项：
var oTable = $("#tableName").dataTable({
// Your other options here...
"bAutoWidth":false
});
回答by Vu Tran
You need to re-draw table when window resizes:
当窗口调整大小时，您需要重新绘制表格：
$(document).ready(function() {
//Load datatable here
$(window).bind('resize', function () {
table.draw();
});
});
