Datatables: Change height of table not working

I am using a Jquery Datatables table with bPaginate = false and sScrollY is some fixed height. Ultimately I want the table to resize on the window.resize event. To get this to work I have built a smaller testcase: In the following code snippets I want the table to resize when I click the buttonHTML:<!DOCTYPE html> Rendering …

via HTML Language Development » Search Results » ajax:

Datatables: Change height of table not working

I am using a Jquery Datatables table with bPaginate = false and sScrollY is some fixed height. Ultimately I want the table to resize on the window.resize event.
To get this to work I have built a smaller testcase: In the following code snippets I want the table to resize when I click the button
HTML:







Rendering engine Browser Platform(s) Engine version CSS grade
Trident Internet
Explorer 4.0
Win 95+ 4 X
Trident Internet
Explorer 5.0
Win 95+ 5 C
Trident Internet
Explorer 5.5
Win 95+ 5.5 A
Rendering engine Browser Platform(s) Engine version CSS grade


Javascript:
$(‘#button’).click(function()
console.log(‘Handler for .click() called.’);
table = $(‘#example’).dataTable();
settings = table.fnSettings();
console.log(‘old:’ + settings.oScroll.sY);
settings.oScroll.sY = ’150px’;
console.log(‘new:’ + settings.oScroll.sY);
table.fnDraw(false);
);
$(‘#example’).dataTable(
“sScrollY”: “350px”,
“bPaginate”: false,
“bJQueryUI”: true
);Console output is as expected:
Handler for .click() called.
old:350px
new:150px
but the table doesn’t update! Any idea what I am doing wrong?
A live example can be found here: http://jsbin.com/anegiw/12/edit
…………………………………………

Ok what seems to work nicely is to do tap into the elements added by the datatbables framework:
$(window).resize(function()
console.log($(window).height());
$(‘.dataTables_scrollBody’).css(‘height’, ($(window).height() – 200));
);

$(‘#example’).dataTable(
“sScrollY”: ($(window).height() – 200),
“bPaginate”: false,
“bJQueryUI”: true
);
This example lets the table resize smoothly with the window.
Live example: http://jsbin.com/anegiw/18/edit
…………………………………………

It might be the case that the sScrollY value only sets the size of the table on initialize and then when you change the value it does not reside the table. That value might only be used to tell datatables “after this amount of scrolling render more results” so you might have to create a facade that updates the sScrollY and then manually updates the css width of that table to the desired height.

For more info: Datatables: Change height of table not working

HTML Language Development » Search Results » ajax

Datatables: Change height of table not working

Share this post:

Related Posts

Leave a Comment