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