Javascript 数据表即时调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8278981/
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 on-the-fly resizing
提问by Emphram Stavanger
I'm using the marvellous DataTables jQuery plug-in; http://datatables.net/Added the FixedColumns and KeyTable extras.
我正在使用奇妙的 DataTables jQuery 插件；http://datatables.net/添加了 FixedColumns 和 KeyTable 附加项。
Now the table does resize prettily when the window size is changed. However, the containing div of the table can also be resized in width by a jQuery animation, and I haven't found a way to resize the table with it-- it just stays stagnant in its original width. Only if I change the div width in the code before pageload, the table is resized correctly.
现在，当窗口大小改变时，表格会很好地调整大小。但是，表格的包含 div 也可以通过 jQuery 动画调整宽度，我还没有找到一种方法来调整表格的大小——它只是保持原始宽度不变。仅当我在页面加载之前更改代码中的 div 宽度时，表格才会正确调整大小。
How can I make the DataTable resize on-the-fly according to both the window width and the containing div width? Thanks in advance! :-)
如何根据窗口宽度和包含的 div 宽度使 DataTable 即时调整大小？提前致谢！:-)
回答by Allan Jardine
What is happening is that DataTables is setting the CSS width of the table when it is initialised to a calculated value - that value is in pixels, hence why it won't resize with your dragging. The reason it does this is to stop the table and the columns (the column widths are also set) jumping around in width when you change pagination.
发生的事情是 DataTables 在初始化为计算值时设置表格的 CSS 宽度 - 该值以像素为单位，因此它不会随着您的拖动而调整大小。这样做的原因是当您更改分页时，停止表格和列（列宽也已设置）在宽度上跳跃。
What you can do to stop this behaviour in DataTables is set the autoWidthparameter to false.
您可以通过将autoWidth参数设置为 false来阻止 DataTables 中的这种行为。
$('#example').dataTable( {
"autoWidth": false
} );
That will stop DataTables adding its calculated widths to the table, leaving your (presumably) width:100% alone and allowing it to resize. Adding a relative width to the columns would also help stop the columns bouncing.
这将停止 DataTables 将其计算出的宽度添加到表格中，让您的（大概） width:100% 单独存在并允许它调整大小。为列添加相对宽度也有助于阻止列弹跳。
One other option that is built into DataTables is to set the sScrollX option to enable scrolling, as DataTables will set the table to be 100% width of the scrolling container. But you might not want scrolling.
DataTables 中内置的另一个选项是设置 sScrollX 选项以启用滚动，因为 DataTables 会将表格设置为滚动容器的 100% 宽度。但您可能不想滚动。
The prefect solution would be if I could get the CSS width of the table (assuming one is applied - i.e. 100%), but without parsing the stylesheets, I don't see a way of doing that (i.e. basically I want $().css('width') to return the value from the stylesheet, not the pixel calculated value).
完美的解决方案是，如果我可以获得表格的 CSS 宽度（假设应用了一个 - 即 100%），但没有解析样式表，我看不到这样做的方法（即基本上我想要 $() .css('width') 从样式表返回值，而不是像素计算值）。
回答by Stephen
I know this is old, but I just solved it with this:
我知道这很旧，但我只是用这个解决了它：
var update_size = function() {
$(oTable).css({ width: $(oTable).parent().width() });
oTable.fnAdjustColumnSizing();
}
$(window).resize(function() {
clearTimeout(window.refresh_size);
window.refresh_size = setTimeout(function() { update_size(); }, 250);
});
Note: This answer applies to DataTables 1.9
注意：此答案适用于 DataTables 1.9
回答by jps
This did the trick for me.
这对我有用。
$('#dataTable').resize()
回答by Rui Martins
$(document).ready(function() {
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
// var target = $(e.target).attr("href"); // activated tab
// alert (target);
$($.fn.dataTable.tables( true ) ).css('width', '100%');
$($.fn.dataTable.tables( true ) ).DataTable().columns.adjust().draw();
} );
});
It works for me, with "autoWidth": false,
它对我有用，有 "autoWidth": false,
回答by Chintan Panchal
You should try this one.
你应该试试这个。
var table = $('#example').DataTable();
table.columns.adjust().draw();
Link: column adjust in datatable
链接：数据表中的列调整
回答by user2314493
Use "bAutoWidth": falseand go through the example given below. It is working for me.
使用"bAutoWidth": false并完成下面给出的示例。它对我有用。
Example:
例子：
$('#tableId').dataTable({
"bAutoWidth": false
});
回答by mezzie
might be late also like the other answer but I did this early this year and the solution I came up with is using css.
可能也像其他答案一样迟到，但我今年早些时候这样做了，我想出的解决方案是使用 css。
$(window).bind('resize', function () {
/*the line below was causing the page to keep loading.
$('#tableData').dataTable().fnAdjustColumnSizing();
Below is a workaround. The above should automatically work.*/
$('#tableData').css('width', '100%');
} );
回答by Alberto Hormazabal
I was having the exact same problem as OP. I had a DataTable which would not readjust its width after a jQuery animation (toogle("fast")) resized its container.
我遇到了与 OP 完全相同的问题。我有一个数据表，它不会在 jQuery 动画（工具（“快速”））调整其容器大小后重新调整其宽度。
After reading these answers, and lots of try and error this did the trick for me:
在阅读了这些答案以及大量的尝试和错误之后，这对我有用：
$("#animatedElement").toggle(100, function() {
$("#dataTableId").resize();
});
After many test, i realized that i need to wait for the animation to finish for dataTables to calculate the correct width.
经过多次测试，我意识到我需要等待动画完成才能让 dataTables 计算出正确的宽度。
回答by Dave Sag
I got this to work as follows:
我让这个工作如下：
First ensure that in your dataTabledefinition your aoColumnsarray includes sWidthdata expressed as a % not fixed pixels or ems.
Then ensure you have set the bAutoWidthproperty to falseThen add this little but of JS:
首先确保在您的dataTable定义中，您的aoColumns数组包含sWidth以百分比表示的数据，而不是固定像素或 em。然后确保您已将bAutoWidth属性设置为false然后添加这个小但 JS：
update_table_size = function(a_datatable) {
if (a_datatable == null) return;
var dtb;
if (typeof a_datatable === 'string') dtb = $(a_datatable)
else dtb = a_datatable;
if (dtb == null) return;
dtb.css('width', dtb.parent().width());
dtb.fnAdjustColumSizing();
}
$(window).resize(function() {
setTimeout(function(){update_table_size(some_table_selector_or_table_ref)}, 250);
});
Works a treat and my table cells handle the white-space: wrap;CSS (which wasn't working without setting the sWidth, and was what led me to this question.)
white-space: wrap;很好用，我的表格单元格处理CSS（如果不设置sWidth.
回答by Keith.Abramo
Have you tried capturing the div resize event and doing .fnDraw()on the datatable? fnDrawshould resize the table for you
您是否尝试过捕获 div resize 事件并在数据表.fnDraw()上执行操作？fnDraw应该为您调整表格大小
