blocks|key|548917|text|我想你可以通过css改变桌子的高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|548918|$(window).resize(function(){
+++++++$('#yourtable').css('height',+'100px');
});|code-block|syntax|javascript|548919|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I think you can change the height of the table by css

<pre><code>$(window).resize(function(){
 $('#yourtable').css('height', '100px');
});
</code></pre>

blocks|key|765702|text|您可以使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|765703|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();
});|code-block|syntax|javascript|765704|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can use the following code:

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

blocks|key|765721|text|当前的答案对我不起作用(使用1.9.1版)。我认为这个解决方案不仅有效，而且性能会更好(and+is+based+on+the+author's+suggestion)。此示例使用smartresize解决跨浏览器窗口重新调整大小的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|765722|var+defaultOptions+=+{...};//your+options
var+calcDataTableHeight+=+function()+{
++++//TODO:+could+get+crazy+here+and+compute+(parent)-(thead%2Btfoot)
++++var+h+=+Math.floor($(window).height()*55/100);
++++return+h+%2B+'px';
};

defaultOptions.sScrollY+=+calcDataTableHeight();

var+oTable+=+this.dataTable(defaultOptions);

$(window).smartresize(function(){++
++++$('div.dataTables_scrollBody').css('height',calcDataTableHeight());
++++oTable.fnAdjustColumnSizing();
});|code-block|syntax|javascript|765723|entityMap|0|LINK|mutability|MUTABLE|url|http://www.datatables.net/forums/discussion/2996/how-to-adjust-sscrolly-with-respect-to-parent-container/p1|1|http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/^0|18|13|0|2I|B|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

The current answer didn't work for me (using v 1.9.1). I think this solution not only works but will perform better (<a href="http://www.datatables.net/forums/discussion/2996/how-to-adjust-sscrolly-with-respect-to-parent-container/p1">and is based on the author's suggestion</a>). This example is using <a href="http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/">smartresize</a> to solve cross browser window re-size issues.

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

blocks|key|548973|text|简单地说就是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|548974|$('#example').dataTable({
+++"sScrollY":+"auto"
});|code-block|syntax|javascript|548975|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Simply put it like this:

<pre><code>$('#example').dataTable({
 "sScrollY": "auto"
});
</code></pre>

blocks|key|765769|text|这是我的工作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|765770|$(document).ready(function+()+{
++++++++++++$('#dataTable1').dataTable({
++++++++++++++++"scrollY":+150,
++++++++++++++++"scrollX":+150
++++++++++++});
++++++++++++$('.dataTables_scrollBody').height('650px');
++++++++});|code-block|syntax|javascript|765771|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is work for me

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

blocks|key|765809|text|使用较新版本的Datatables，还有其他方法，当结合使用计时器来监视resize事件触发器时，效果非常好。我把“古老的”"window.location.reload()“这行代码留给那些运行旧版本DataTables的人--只需取消注释它，并注释掉"table.draw()”调用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|765810|顺便说一下，文档说正确的调用是"table.Draw()“--在我使用的版本中不是这样的(调用都是小写的)。|765811|$(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%2B"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
});|code-block|syntax|javascript|765812|就这样。|765813|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Using newer versions of Datatables, there's other methods, which, when combined with the judicious use of a timer for watching the resize event triggers, works pretty well. I've left the "ancient" "window.location.reload()" line in for those who are stuck running older versions of DataTables - simply uncomment it and comment out the "table.draw()" call. 

Side note, the documentation says the correct call is "table.Draw()" - that is not the case on the version I am using (call is all lowercase). 

<pre><code>$(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
});
</code></pre>

That's it.

I'm using jQuery <a href="http://www.datatables.net/">Datatables</a>.
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?

How to dynamically change jQuery Datatables height

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

问如何动态更改jQuery数据表的高度
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何动态更改jQuery数据表的高度EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何动态更改jQuery数据表的高度
EN