如何动态更改 jQuery Datatables 高度答案

【问题标题】：How to dynamically change jQuery Datatables height如何动态更改 jQuery Datatables 高度
【发布时间】：2011-11-29 20:22:24
【问题描述】：

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

【问题讨论】：

标签： javascript 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');
});

【讨论】：

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