数据表即时调整大小

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

你应该尝试这个.

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

链接:数据表中的列调整

Answer 6

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

例:

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