Question

我正在使用奇妙的DataTables jQuery插件; http://datatables.net/添加了FixedColumns和KeyTable附加功能。

现在，当窗口大小改变时，表会调整大小。但是，表的包含div也可以通过jQuery动画调整宽度，我还没有找到用它来调整表大小的方法 - 它只是在原始宽度上停滞不前。只有在pageload之前更改代码中的div宽度时，表才会正确调整大小。

如何根据窗口宽度和包含的div宽度，使DataTable动态调整大小？提前致谢！： - ）

Answer 1

发生的事情是DataTables在初始化为计算值时设置表的CSS宽度 - 该值以像素为单位，因此不会因为拖动而调整大小。这样做的原因是当您更改分页时停止表格和列（列宽也设置）在宽度上跳跃。

如何在DataTables中停止此行为，请将autoWidth参数设置为false。

$('#example').dataTable( {
  "autoWidth": false
} );

这将阻止DataTables将其计算的宽度添加到表中，使您的（可能）宽度：100％单独并允许其调整大小。向列添加相对宽度也有助于阻止列弹跳。

DataTables中内置的另一个选项是设置sScrollX选项以启用滚动，因为DataTables将表设置为滚动容器的100％宽度。但你可能不想滚动。

完美的解决方案是，如果我可以得到表的CSS宽度（假设一个应用 - 即100％），但没有解析样式表，我没有看到这样做的方式（即基本上我想要$（）。css（'width'）从样式表返回值，而不是像素计算值。）

Answer 2

我知道这已经过时了，但我刚刚解决了这个问题：

  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

Answer 3

这对我有用。

$('#dataTable').resize()

Answer 4

$(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,

Answer 5

你应该试试这个。

GC's

链接：column adjust in datatable

Answer 6

使用"bAutoWidth": false并完成下面给出的示例。它对我有用。

示例：

$('#tableId').dataTable({ "bAutoWidth": false });

Answer 7

可能会像其他答案一样迟到但我今年早些时候这样做了，而我提出的解决方案是使用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%');
    } );

Answer 8

您是否尝试捕获div resize事件并在数据表上执行.fnDraw()？ fnDraw应该为您调整表格

Answer 9

我按照以下方式工作：

首先确保在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就无法运行），这也是导致我回答这个问题的原因。）

Answer 10

我遇到与OP完全相同的问题。我有一个DataTable，它不会在jQuery动画（toogle（＆＃34; fast＆＃34;））调整其容器大小后重新调整其宽度。

在阅读完这些答案后，还有很多尝试和错误，这对我来说很有用：

  $("#animatedElement").toggle(100, function() {    
    $("#dataTableId").resize();
  });

经过多次测试，我意识到我需要等待动画完成dataTables来计算正确的宽度。

Answer 11

我遇到了同样的挑战。当我折叠了我的Web应用程序左侧的一些菜单时，数据表不会调整大小。添加＆＃34; autoWidth＆＃34;：false duirng初始化对我有用。

$('#dataTable').DataTable({'autoWidth':false, ...});

Answer 12

下面的代码是Chintan Panchal的答案以及Antoine Leclair的评论（将代码放在windows resize事件中）的组合。（我不需要Antoine Leclair提到的辩解，但这可能是最好的做法。）

System.Diagnostic.Trace

这种方法在我的案例中起作用。

数据表即时调整大小

12 个答案: