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, ...});