我正在使用神奇的 DataTables jQuery 插件； http://datatables.net/ 添加了 FixedColumns 和 KeyTable extras。
现在，当窗口大小改变时，表格确实会调整大小。但是，表格的包含 div 也可以通过 jQuery 动画调整其宽度，但我还没有找到一种方法来调整表格的大小——它只是在其原始宽度上停滞不前。仅当我在页面加载之前更改代码中的 div 宽度时，表格才会正确调整大小。
如何根据窗口宽度和包含的 div 宽度即时调整 DataTable 的大小？提前致谢！ :-)
【问题讨论】：
标签： javascript jquery datatables
发生的情况是，DataTables 在将表格初始化为计算值时正在设置表格的 CSS 宽度 - 该值以像素为单位，因此它不会随着您的拖动而调整大小。这样做的原因是在您更改分页时停止表格和列（列宽也已设置）在宽度上跳跃。
在 DataTables 中阻止这种行为的方法是将 autoWidth 参数设置为 false。
$('#example').dataTable( {
"autoWidth": false
} );
这将阻止 DataTables 将其计算出的宽度添加到表格中，而让您的（大概）宽度：100% 独自一人并允许它调整大小。为列添加相对宽度也有助于阻止列弹跳。
DataTables 内置的另一个选项是设置 sScrollX 选项以启用滚动，因为 DataTables 会将表格设置为滚动容器的 100% 宽度。但你可能不想滚动。
如果我能获得表格的 CSS 宽度（假设应用了一个 - 即 100%），那么完美的解决方案是，但如果不解析样式表，我看不到这样做的方法（即基本上我想要$().css('width') 从样式表返回值，而不是像素计算值）。
【讨论】：
bAutoWidth设置，但是好像没有效果。也许这是由于 FixedColumns 将表格分成了几块？我已经将sScrollX 和sScrollY 都设置为100% 无论如何，我发现使用jQuery 我可以触发窗口上的“resize”事件，从而使dataTables 调整大小。这非常 hacky，我什至不知道它的跨浏览器兼容性如何，因此确实会受到比这更好的解决方案的赞赏。
bAutoWidth 设置为 false 为我解决了这个问题。
我知道这是旧的，但我只是用这个解决了它：
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);
});
注意：此答案适用于 DataTables 1.9
【讨论】：
$('.table-classname').dataTable().fnAdjustColumnSizing(); 完成了这项工作。谢谢
这对我有用。
$('#dataTable').resize()
【讨论】：
$(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();
} );
});
它对我有用，"autoWidth": false,
【讨论】：
你应该试试这个。
var table = $('#example').DataTable();
table.columns.adjust().draw();
【讨论】：
使用"bAutoWidth": false 并查看下面给出的示例。它对我有用。
示例：
$('#tableId').dataTable({
"bAutoWidth": false
});
【讨论】：
可能也像其他答案一样迟到，但我今年早些时候这样做了，我想出的解决方案是使用 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%');
} );
【讨论】：
"autoWidth": false。在您的解决方案中，DataTable 将一劳永逸地计算固定宽度，并且只计算一次：$('#tableData').css('width', '100%'); 就足够了
我也有同样的挑战。当我折叠 Web 应用程序左侧的一些菜单时，数据表不会调整大小。添加“autoWidth”：错误初始化对我有用。
$('#dataTable').DataTable({'autoWidth':false, ...});
【讨论】：
您是否尝试过捕获 div 调整大小事件并在数据表上执行 .fnDraw()？ fnDraw 应该为你调整表格大小
【讨论】：
setTimeout 设置为300 毫秒（动画的长度）来调用.fnDraw() 函数。但是，它似乎没有任何效果。另外，我觉得这是一种杂乱无章的修复，因为我希望表格调整大小与 div 大小调整一起成为一个平滑的动画，而不是在动画结束后“轻弹”到适当的大小。
我让这个工作如下：
首先确保在您的dataTable 定义中，您的aoColumns 数组包含sWidth 数据，以% 非固定像素或ems 表示。
然后确保您已将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);
});
工作愉快，我的表格单元格处理white-space: wrap; CSS（如果不设置sWidth，它就无法工作，这就是导致我提出这个问题的原因。）
【讨论】：
我遇到了与 OP 完全相同的问题。我有一个 DataTable 在 jQuery 动画 (toogle("fast")) 调整其容器大小后不会重新调整其宽度。
在阅读了这些答案之后，我做了很多尝试和错误，这对我有用：
$("#animatedElement").toggle(100, function() {
$("#dataTableId").resize();
});
经过多次测试，我意识到我需要等待动画完成才能让 dataTables 计算出正确的宽度。
【讨论】：
下面的代码结合了 Chintan Panchal 的回答和 Antoine Leclair 的评论（将代码放在 windows resize 事件中）。 （我不需要 Antoine Leclair 提到的去抖动，但这可能是最佳实践。）
$(window).resize( function() {
$("#example").DataTable().columns.adjust().draw();
});
这就是我的案例。
【讨论】：