我正在使用神奇的 DataTables jQuery 插件； http://datatables.net/ 添加了固定列和 KeyTable 附加功能。
现在，当窗口大小更改时，表格会适当地调整大小。然而，表格的包含 div 也可以通过 jQuery 动画调整宽度，但我还没有找到用它调整表格大小的方法——它只是保持原来的宽度不变。仅当我在页面加载之前更改代码中的 div 宽度时，表格的大小才会正确调整。
如何使 DataTable 根据窗口宽度和包含的 div 宽度即时调整大小？
发生的情况是，DataTables 在初始化为计算值时设置表格的 CSS 宽度 - 该值以像素为单位，因此它不会随着您的拖动而调整大小。这样做的原因是当您更改分页时，阻止表格和列（也设置了列宽）在宽度上跳跃。
要在 DataTables 中停止此行为，可以将 autoWidth 参数设置为 false。
$('#example').dataTable( {
"autoWidth": false
} );
这将阻止 DataTables 将其计算出的宽度添加到表中，而仅保留您的（大概） width:100% 并允许其调整大小。为列添加相对宽度也有助于阻止列弹跳。
DataTables 中内置的另一个选项是设置 sScrollX 选项以启用滚动，因为 DataTables 会将表格设置为滚动容器的 100% 宽度。但您可能不想滚动。
完美的解决方案是，如果我可以获得表格的 CSS 宽度（假设应用了一个 - 即 100%），但如果不解析样式表，我看不到一种方法来做到这一点（即基本上我想要 $( ).css('width') 返回样式表中的值，而不是像素计算值）。
我知道这已经很旧了，但我只是用这个解决了它：
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
这对我有用。
$('#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,使用
"bAutoWidth": false示例：
$('#tableId').dataTable({
"bAutoWidth": false
});
我也面临着同样的挑战。当我折叠网络应用程序左侧的一些菜单时，数据表不会调整大小。添加“autoWidth”： false duirng 初始化对我有用。
$('#dataTable').DataTable({'autoWidth':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%');
} );
您是否尝试过捕获 div 调整大小事件并在数据表上执行
.fnDraw()fnDraw我让它按如下方式工作：
首先确保在您的
dataTableaoColumnssWidthbAutoWidthfalseupdate_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;sWidth我遇到了与OP完全相同的问题。我有一个 DataTable，在 jQuery 动画（toogle（“fast”））调整其容器大小后，它不会重新调整其宽度。
阅读这些答案以及大量的尝试和错误后，这对我来说是成功的：
$("#animatedElement").toggle(100, function() {
$("#dataTableId").resize();
});
经过多次测试，我意识到我需要等待动画完成数据表才能计算正确的宽度。
下面的代码是 Chintan Panchal 的答案和 Antoine Leclair 的评论的组合（将代码放在窗口调整大小事件中）。 （我不需要 Antoine Leclair 提到的去抖，但这可能是最佳实践。）
$(window).resize( function() {
$("#example").DataTable().columns.adjust().draw();
});
这是对我的案例有效的方法。
对我来说，下面的工作非常好，它跟踪数据表的先前大小，如果它在 250 毫秒内发生变化，那么它将调用相关数据表上的列调整绘制。
var mapDTWidth = new Map();
window.setInterval(function() {
$($.fn.dataTable.tables( true ) ).each(function(index) {
var elId = $(this).attr('id');
// console.log('DT ID: ', elId, ', width:', $(this).width(), ', prev:', mapDTWidth.get(elId));
if (elId) {
var prevWidth = mapDTWidth.get(elId);
if (!prevWidth) {
prevWidth = $(this).width();
mapDTWidth.set(elId, prevWidth);
}
if (prevWidth != $(this).width()) {
// doing a redraw
console.log("Columns adjust for ", elId);
$(this).DataTable().columns.adjust().draw();
mapDTWidth.set(elId, $(this).width());
}
}
});
}, 250);