Make sScrollY dynamic?

Taylor514ce

I have "sScrollY" : $(document).height() - 260

When the window is resized, this isn't recalculated. I see the fnColumnAdjust api, is there a similar api to adjust the number of rows, or otherwise redraw the table with a new sScrollY value?

Taylor514ce

I hit on this. Is this the proper technique?

[code]
$(window).bind('resize', function () {
$(".dataTables_scrollBody").height($(document).height() - 260);
myTable.fnDraw();
});
[/code]

allan

Yes that looks like the way I'd do it. With your first post, that is evaluated when DataTables is initialised, thus it only sees a number. The way around that would be to allow a function to be passed in - which might be a nice idea for the future.

Ultimately I think this should be wrapped up into a plug-in API method, but yes, that looks good :-)

Allan

Taylor514ce

I'm not entirely sure what $(".dataTables_scrollBody") would reference. The "active" Datatable? I have a variable assigned, myTable, what would the selector be for that instance's scrollBody?

allan

No - it would reference all of the scrollBody elements on the table. To target a single scroll body, based on the instance you could do:

[code]
$('.dataTables_scrollBody', table.fnSettings().nTableWrapper)
[/code]

Or, if you have the table node already, you could use:

[code]
tableNode.parentNode;
[/code]

Allan

fnappey

I have the same problem, but I don't understand this sample.
On the resize event, you "manually" change the height of an element renderered by datatables component. Ok.
But as you didn't change the sScrollY value, when you call the fnDraw() method, the initial rendering is called once again, and the height is fixed by the old sScrollY value once again.
I'm right ?

fnappey

I response myself. It seems that the best way to make the scrollY dynamic is to set the value, like this:
[code]
$(window).bind('resize', function () {
var NewHeight = $(document).height() - 260;
var oSettings = myTable.fnSettings();
oSettings.oScroll.sY = NewHeight + "px";
myTable.fnDraw();
});
[/code]