Question

I have multiple tabs in my application with multiple datatables.

I am trying to figure out a way to adjust the height of datatables based on the screen size.

I tried the below function, but it doesnt seem to increase the height of datatable when the window is resized. Any suggestions would be very helpful?

  var calcDataTableHeight = function(percentageValue) {
             return $(window).height()*(percentageValue)/100;
         };



$(window).resize(function() {
          var table = $.fn.dataTable.fnTables(true);
                if ( table.length > 0 ) {
                    for(var i=0;i<table.length;i++){
                        $(table[i]).dataTable().css({ height: $(table[i]).dataTable().parent().height() });
                        $(table[i]).dataTable().fnAdjustColumnSizing();  
                    }
                }
                }
     });

Answer 1

I figured out a way to increase the height using scrollY parameter..sample snippet below…

$(window).resize(function() {
    var table = $.fn.dataTable.fnTables(true);
    if (table.length > 0) {
        for(var i = 0; i < table.length; i++) {
            $(table[i]).dataTable().fnSettings().oScroll.sY = 
                $(window).height() < 650 ? calcDataTableHeight(40) : calcDataTableHeight(54);
            $(table[i]).dataTable().fnAdjustColumnSizing();  
        }
    }
});

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