Javascript 如何动态更改jQuery数据表高度

我正在使用jQuery。

---

每当用户调整窗口大小时，我都要更改表格的高度。我能够捕获窗口调整事件，它允许我计算新高度。如何将新高度指定给datatable对象

我想你可以通过css改变桌子的高度

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

---

您可以使用以下代码：

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();
});

---

当前的答案对我不起作用（使用v1.9.1）。我认为这个解决方案不仅有效，而且性能会更好（）。此示例用于解决跨浏览器窗口的重新调整大小问题

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();
});

---

简单地说：

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

这是我的工作

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

---

使用较新版本的Datatables，还有其他一些方法，当与明智地使用计时器来监视调整大小事件触发器结合使用时，效果非常好。我将“古代”window.location.reload（）”这一行留给了那些一直在运行旧版本DataTables的人——只需取消对它的注释并注释掉“table.draw（）”调用

请注意，文档中说正确的调用是“table.Draw（）”——我使用的版本并非如此（调用都是小写）

---

就这样

对于数据表1.10：

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

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

---

更改CSS时，必须调用

draw（）

以下是一个简单的解决方案：

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

可以使用设置高度，该高度根据窗口的大小而变化

---

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

这不起作用，在datatables设置中，你不能只更改表格高度。@paul：当我们调整浏览器窗口大小时，datatable会自动将高度更改为浏览器高度。@Raje我知道代码的工作原理。我只是不知道他为什么要乘以55/100。似乎是为特定页面选择的一个随机数，而不是一般解决方案的一部分。@paul我认为这只是一个示例值，因为OP希望根据窗口调整其表格的大小。@Anzeo是的，我同意。我在实现中使用了不同的值。我还使用了下面rynop的答案中显示的smartresize选项，这是一个更为最新的答案。@paul同意，我也使用了rynop的答案，而不是公认的答案。我使用滚动条扩展名，在滚动时通过CSS设置高度会被重置，因此这种方法不起作用。我接受的答案在1.10.0 beta 2中对我有效。非常感谢！这是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很棒的建议。如果需要，请随意修改。您能告诉我如何改进我的答案吗？

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

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

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