getting smart resize and scrollCollapse to work well together

Pierce Krouse

I have a datatable with scrollCollapse set to true so that the horizontal scrollbar appears at the bottom edge of the table.
Everything works great when the table is rendered. I am capturing the smartresize event so I can resize the table to fit the new window size. Code for that is

var calcDataTableHeight = function(allowance){
      var h = Math.floor($(window).height()-allowance);
      return h + 'px';
    };

This new height is passed back to the caller and used to resize the height like this:

jQuery(function($){
        $(window).smartresize(function(){
          $('div.dataTables_scrollBody').css('height', calcDataTableHeight(lynxPageAllowance+15));
          if (oTable != "") {
             oTable.fnAdjustColumnSizing();
             oTable.fnDraw(true);
          }
    });
})

The allowance (with the fudge factor of 15) is to allow room on the page for other elements so that everything has room to render.
This works great on tables that are taller than the window. The new value is pushed into the css, the columns are adjusted as needed, the table gets redrawn and all is good.

The problem is with tables that have only a few rows, making the table contents shorter than the page. If the user resizes the window, the call happens, the height is applied, and the scroll bar hops down to the bottom of the page. I realize this is because I told it to, by overriding the height this way, making it appear that the scrollCollapse was being ignored.

What I am looking for is a way to find out how tall the table really is inside that scroll container (not the scroll container size) so that I can pass back the actual table size for the resize action if it is shorter than the page height.

I have tried things like this:

var tHeight = Number($('div.dataTables_scrollBody').height());

But that is not the true height of the table. That's the scroll area. The true table height caught like this:

var peek = Number($('div.dataTable').height());

comes back as 0.
So how do I solve this resize problem? Is there a way to get the table height and react accordingly, or am I just in a javascript mess that cannot be solved?

Short tl;dr, is there a way to resize the table height when the window resizes so that the scrollCollapse behavior is always respected?
--PK

Pierce Krouse

I've been coding up a solution to my problem, and it comes down to elementary datatables scrollY. Setting this value dynamically meant that I had to examine the data table header and body, and compare to the known available space on the web page.