如何动态更改jQuery Datatables高度

时间:2011-10-03 10:56:24

标签: javascript jquery datatables

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

8 个答案:

答案 0 :(得分:29)

您可以使用以下代码:

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

答案 1 :(得分:8)

目前的答案对我不起作用(使用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();
});

答案 2 :(得分: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()

答案 3 :(得分:3)

简单地说就是这样:

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

答案 4 :(得分:3)

使用较新版本的Datatables,还有其他方法,当与明智地使用计时器观察调整大小事件触发器相结合时,效果非常好。我离开了古老的" " window.location.reload()"为那些坚持运行旧版DataTables的人排队 - 只需取消注释并注释掉" 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
});

那就是它。

答案 5 :(得分:1)

这对我有用

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

答案 6 :(得分:-1)

我认为您可以通过css

更改表格的高度
$(window).resize(function(){
       $('#yourtable').css('height', '100px');
});

答案 7 :(得分:-1)

这是一个简单的解决方案,例如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 +