Datatables实时resize
我正在使用奇妙的DataTables jQuery插件; http://datatables.net/添加了FixedColumns和KeyTable的额外function。
现在，当窗口大小改变时，表格会进行大小调整。 然而，表格的包含div也可以通过jQueryanimation宽度来resize，而且我还没有find调整表格大小的方法 – 它只是停留在原始宽度上。 只有在pageload之前更改代码中的div宽度，表格才能正确resize。
我怎样才能使DataTable根据窗口宽度和包含的div宽度dynamicresize？ 提前致谢！ 🙂
现在发生的事情是DataTables设置表格的CSS宽度，当它被初始化为一个计算值 – 这个值是以像素为单位的，因此为什么它不会调整你的拖动。 这样做的原因是当你改变分页时，停止表格和列宽（也设置列宽）。
在DataTables中停止这种行为可以做的是将autoWidth参数设置为false。
$('#example').dataTable( { "autoWidth": false } ); 这将阻止DataTables将其计算的宽度添加到表中，只留下（可能）宽度：100％，并允许其resize。 将相对宽度添加到列也将有助于停止列弹跳。
内置于DataTables中的另一个选项是设置sScrollX选项以启用滚动，因为DataTables将表设置为滚动容器的100％宽度。 但是你可能不想滚动。
完美的解决scheme是，如果我能得到表的CSS宽度（假设一个被应用 – 即100％），但没有parsing样式表，我没有看到这样做的方式（即基本上我想$（） .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()
你应该试试这个。
var table = $('#example').DataTable(); table.columns.adjust().draw();
链接： 调整数据表中的列
$(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,
可能迟到也像其他的答案，但我今年年初做了这个，我想出了解决scheme是使用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%'); } );
使用"bAutoWidth": false并通过下面给出的例子。 它正在为我工作。
例：
$('#tableId').dataTable({ "bAutoWidth": false });
你有没有尝试捕获div resize事件，并在数据.fnDraw()上做.fnDraw() ？ fnDraw应该为你调整表格大小
我得到这个工作如下：
首先确保在你的dataTable定义中，你的aoColumns数组包含sWidth数据，expression为％不固定的像素或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不会重新调整它的宽度后，jQueryanimation（toogle（“快”））调整其容器。
在阅读这些答案，以及大量的尝试和错误，这对我来说是伎俩：
$("#animatedElement").toggle(100, function() { $("#dataTableId").resize(); });
经过多次testing，我意识到我需要等待animation完成dataTables来计算正确的宽度。
下面的代码是Chintan Panchal的答案和Antoine Leclair的评论（将代码放在窗口大小调整事件中）的组合。 （我不需要Antoine Leclair提到的反弹，但是这可能是最好的做法。）
$(window).resize( function() { $("#example").DataTable().columns.adjust().draw(); });
这是在我的情况下工作的方法。
我有同样的挑战。 当我折叠我的Web应用程序左侧的一些菜单时，数据表不会resize。 添加“autoWidth”：false duirng初始化为我工作。
$('#dataTable').DataTable({'autoWidth':false, ...});
