如何动态更改jQuery Datatables高度

Question

我正在使用jQuery Datatables.我想在用户调整窗口大小时更改表的高度.我能够捕捉窗口调整大小事件,它允许我计算新的高度.如何将新高度分配给数据表对象？

Answer 1

您可以使用以下代码:

var calcDataTableHeight = function() {
  return $(window).height() * 55 / 100;
};

var oTable = $('#reqAllRequestsTable').dataTable({
  "sScrollY": calcDataTableHeight();
});

$(window).resize(function() {
  var oSettings = oTable.fnSettings();
  oSettings.oScroll.sY = calcDataTableHeight(); 
  oTable.fnDraw();
});

Answer 2

目前的答案对我不起作用(使用v 1.9.1).我认为这个解决方案不仅有效,而且性能更好(并且基于作者的建议).此示例使用smartresize来解决跨浏览器窗口重新调整大小的问题.

var defaultOptions = {...};//your options
var calcDataTableHeight = function() {
    //TODO: could get crazy here and compute (parent)-(thead+tfoot)
    var h = Math.floor($(window).height()*55/100);
    return h + 'px';
};

defaultOptions.sScrollY = calcDataTableHeight();

var oTable = this.dataTable(defaultOptions);

$(window).smartresize(function(){  
    $('div.dataTables_scrollBody').css('height',calcDataTableHeight());
    oTable.fnAdjustColumnSizing();
});

Answer 3

使用较新版本的数据表时，还有其他方法，当与明智地使用计时器来监视调整大小事件触发器一起使用时，它们可以很好地工作。对于那些被困在运行旧版本的DataTables的人，我留下了“ ancient”“ window.location.reload（）”这一行-只需取消注释并注释掉“ table.draw（）”调用即可。

附带说明，文档说正确的调用是“ table.Draw（）”-在我使用的版本中不是这种情况（调用全部为小写）。

$(window).on('resize', function(e) 
{
  if (typeof resizeTimer !== 'undefined') {
    clearTimeout(resizeTimer);
  }
  resizeTimer = setTimeout(function() 
  { 

    // Get table context (change "TABLENAME" as required)
       var table = $('#TABLENAME').DataTable();                                 

    // Set new size to height -100px
       $('.dataTables_scrollBody').css('height', window.innerHeight-100+"px");      

    // Force table redraw
       table.draw();        

    // Only necessary for ancient versions of DataTables - use INSTEAD of table.draw()
       // window.location.reload();
  }, 250);    // Timer value for checking resize event start/stop
});

而已。

Answer 4

对于数据表 1.10：

            $("#table").DataTable( {
              scrollY: '250px',
              scrollCollapse: true,
              paging: false,
            });

            $('#table').closest('.dataTables_scrollBody').css('max-height', '500px');
            $('#table').DataTable().draw();

当您更改 CSS 时，您必须调用draw().