Question

I am using jquery data table for displaying data. On body onload its sets height using following code

<table id="RequestsTable" cellpadding="0" cellspacing="0" border="0" class="display" style="width:100%;">

In script i have write down following code.
ScrollY calculates height base on window height and assign to data table on form load.

<script type="text/javascript">
var scrollY = $(window).height()*58/100;

var oTable = $('#RequestsTable').dataTable({
    "sScrollY": scrollY,
    "bPaginate": true,
    "bScrollCollapse": true,

    } );

I want to calculate height again when window resize and assign to data table.
I have tried following code but not worked for me.

var scrollY = $(window).height()*58/100;    
$(window).resize(function () {  
scrollY = $(window).height()*58/100;
});

    var oTable = $('#RequestsTable').dataTable({
        "sScrollY": scrollY,
        "bPaginate": true,
        "bScrollCollapse": true,

        } );

anybody have any idea ow can implement this.
Thanks in advance.

I tried this but no luck

function calcDataTableHeight () {
    return $(window).height()*58/100;
};

$(window).resize(function () {

   var oSettings = oTable.fnSettings();
    oSettings.sScrollY = calcDataTableHeight();
    oTable.fnDraw();
});

var oTable = $('#reqAllRequestsTable').dataTable({
    "sScrollY": calcDataTableHeight()});

Any other way is possible to set height using css ??

Answer 1

It isn’t sufficient to update the variable, you need to pass the new height to the datatable plugin (as it doesn’t update automatically when the variable’s content changes):

var $window = $(window);

var calcDataTableHeight = function() {
    return Math.round($window.height() * 0.58);
};

var oTable = $('#RequestsTable').dataTable({
    "sScrollY": calcDataTableHeight(),
    "bPaginate": true,
    "bScrollCollapse": true,
});

$window.resize(function() {
    var oSettings = oTable.fnSettings();
    oSettings.oScroll.sY = calcDataTableHeight(); // <- updated!

    // maybe you need to redraw the table (not sure about this)
    oTable.fnDraw(false);
});