Question

I m using jQuery Datatables. I want to change the height of the table whenever a user resizes the window. I m able to catch the window resize event which allows me to calculate the new height. How can I assign the new height to the datatable object?

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

目前的答案对我不利(使用1.9.1条)。我认为,这一解决办法不仅行之有效,而且将取得更好的效果(http://www.datatables.net/forums/discussion/2996/how-to-adjust-sscrolly-with- Respect-to-other-container/p1>),并且基于作者的建议。这个例子正在使用 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

For DataTables 1.10:

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

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

当你改变中央支助事务时,你必须打电话<代码>draw()。

Answer 4

采用更新的数据表,还采用其他方法,这些方法加上审慎使用时间来观察变性事件的触发因素,效果良好。我先把“ancient”“window.place.place.reload()”线留给那些忙于旧版数据表的人去做——只是不做,并评论了“表.draw()”电话。

附带说明,文件指出,正确的呼吁是“表.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
});

That s it.

Answer 5

简单地把它当作:

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

Answer 6

This is work for me

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

Answer 7

这里的简单解决办法是

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

vh Relative to 1% of the height of the viewport*

You can use the vh unit to set a height that varies based on the size of the window.

支持:<200+, IE 9.0+,PeFox 19.0+, Sato 6.0+, 20.0+

Answer 8

我认为,你可以把桌子的顶端改变。

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

友情链接