如何动态更改 jQuery Datatables 高度

Posted 2023-05-07

【中文标题】如何动态更改 jQuery Datatables 高度

【英文标题】：How to dynamically change jQuery Datatables height

【发布时间】：2011-11-29 20:22:24

【问题描述】：

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

【参考方案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();
);

【讨论】：

@paul：当我们调整浏览器窗口的大小时，数据表会自动将高度更改为浏览器高度。

@Raje 我知道代码是如何工作的。我只是不知道他为什么乘以 55/100。似乎是为特定页面选择的随机数 - 不是您推荐作为通用解决方案的一部分。

@paul 我认为这只是一个示例值，因为 OP 希望根据窗口调整其表格的大小。

@Anzeo 是的，我同意。我在实现中使用了不同的值。我还使用了下面 rynop 答案中显示的 smartresize 选项，这是一个更新的答案。

@paul 同意，我也使用了 rynop 的答案而不是接受的答案。

【参考方案2】：

当前的答案对我不起作用（使用 v 1.9.1）。我认为这个解决方案不仅有效，而且性能更好（and is based on the author's suggestion）。此示例使用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();
);

【讨论】：

我使用 Scroller 扩展并通过 CSS 设置高度在您滚动时会重置，因此这种方法不起作用。不过，接受的答案对我来说适用于 1.10.0 beta 2。

【参考方案3】：

使用较新版本的 Datatables，还有其他方法，当与明智地使用计时器来观察调整大小事件触发器相结合时，效果非常好。我已经为那些被困在运行旧版本 DataTables 的人留下了“古老的”“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
);

就是这样。

【讨论】：

非常感谢！这是 DataTables 1.10.X 的正确答案。唯一缺少的是让 Scroller 插件知道高度变化。

如果使用Scroller，而不是table.draw()，需要调用table.scroller.measure(true)。

@ypnos，谢谢，我正在我们的一个部署中进行尝试（其中 IE 的代码存在重新计算问题）并将更新。

这在 1.10.X 中几乎可以完美运行。我唯一会用if (typeof resizeTimer !== 'undefined') 包装clearTimeout(resizeTimer) 语句以避免JS 错误。

@lodb 很棒的建议。如果需要，请随意修改。

【参考方案4】：

对于 DataTables 1.10：

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

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

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

【参考方案5】：

简单地说：

$('#example').dataTable(
   "sScrollY": "auto"
);

【参考方案6】：

这对我有用

$(document).ready(function () 
            $('#dataTable1').dataTable(
                "scrollY": 150,
                "scrollX": 150
            );
            $('.dataTables_scrollBody').height('650px');
        );

【参考方案7】：

这是一个简单的解决方案，如documented here

    $(document).ready(function() 
        $('#example').DataTable( 
            scrollY:        '50vh',
            scrollCollapse: true,
            paging:         false
        );
    );

vh 相对于视口高度的 1%*

您可以使用vh unit 设置根据窗口大小而变化的高度。

支持：Chrome 20.0+、IE 9.0+、FireFox 19.0+、Safari 6.0+、Opera 20.0+

【讨论】：

你能告诉我如何改进我的答案吗？

【参考方案8】：

我觉得你可以通过css改变表格的高度

$(window).resize(function()
       $('#yourtable').css('height', '100px');
);

【讨论】：

这不行，它在数据表设置中，你不能只改变表格高度。