正在动态调整数据表的大小

Datatables on-the-fly resizing

本文关键字：数据表 调整 动态      更新时间：2023-09-26

我正在使用出色的DataTablesjQuery插件；http://datatables.net/添加了FixedColumns和KeyTable附加项。

现在，当窗口大小发生变化时，表确实会漂亮地调整大小。然而，表中包含的div也可以通过jQuery动画调整宽度，我还没有找到用它调整表大小的方法——它只是停留在原始宽度。只有在页面加载之前更改代码中的div宽度，才能正确调整表的大小。

如何根据窗口宽度和包含的div宽度动态调整DataTable的大小？

实际情况是，DataTables在将表初始化为计算值时设置了表的CSS宽度-该值以像素为单位，因此它不会随着拖动而调整大小。它这样做的原因是为了在更改分页时停止表和列(列宽也已设置(在宽度上的跳跃。

要在DataTables中停止这种行为，可以将autoWidth参数设置为false。

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

这将停止DataTables将其计算的宽度添加到表中，只保留您的(大概(宽度：100%，并允许其调整大小。为列添加相对宽度也有助于阻止列反弹。

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

最好的解决方案是，如果我可以获得表的CSS宽度(假设应用了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,

你应该试试这个。

var table = $('#example').DataTable();
table.columns.adjust().draw();

链接：数据表中的列调整

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

示例：

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

我也遇到了同样的挑战。当我折叠web应用程序左侧的一些菜单时，数据表不会调整大小。添加"autoWidth"：错误的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 resize事件并对数据表执行.fnDraw()？fnDraw应该为您调整的表格大小

我这样做了：

首先，确保在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的评论的组合(将代码放在窗口调整大小事件中(。(我不需要Antoine Leclair提到的退场，但这可能是最好的做法。(

  $(window).resize( function() {
      $("#example").DataTable().columns.adjust().draw();
  });

这就是在我的案例中行之有效的方法。

相关文章：