From 9016c33370f81d5ab85bc3f29c9cfdc72e3625dd Mon Sep 17 00:00:00 2001 From: Joost Molenkamp Date: Fri, 29 Jul 2022 20:17:42 +0200 Subject: [PATCH] Resize on layout changes due to width changes --- features/pageResize/dataTables.pageResize.js | 64 +++++++++++++++----- 1 file changed, 48 insertions(+), 16 deletions(-) diff --git a/features/pageResize/dataTables.pageResize.js b/features/pageResize/dataTables.pageResize.js index 8bf24e6..522733c 100644 --- a/features/pageResize/dataTables.pageResize.js +++ b/features/pageResize/dataTables.pageResize.js @@ -76,7 +76,15 @@ var PageResize = function ( dt, pageResizeManualDelta ) container: $(table.container()), table: $(table.node()), delta: pageResizeManualDelta - }; + }; + + this.sizes = { + offsetTop: this._getOffsetTop(), + tableHeight: this._getTableHeight(), + containerHeight: this._getContainerHeight(), + headerHeight: this._getHeaderHeight(), + footerHeight: this._getFooterHeight() + }; var host = this.s.host; if ( host.css('position') === 'static' ) { @@ -100,25 +108,30 @@ PageResize.prototype = { var settings = this.s; var dt = settings.dt; var t = dt.table(); - var offsetTop = $( settings.table ).offset().top; var rows = $( 'tr', settings.body ); var rowHeight = rows.eq( rows.length > 1 ? 1 : 0 ).height(); // Attempt to use the second row if poss, for top and bottom border var availableHeight = settings.host.height(); var scrolling = t.header().parentNode !== t.body().parentNode; - var delta = settings.delta; + var delta = settings.delta; + + var offsetTop = this.sizes.offsetTop = this._getOffsetTop(); + var tableHeight = this.sizes.tableHeight = this._getTableHeight(); + var containerHeight = this.sizes.containerHeight = this._getContainerHeight(); + var headerHeight = this.sizes.headerHeight = this._getHeaderHeight(); + var footerHeight = this.sizes.footerHeight = this._getFooterHeight(); // Subtract the height of the header, footer and the elements // surrounding the table if ( ! scrolling ) { if ( t.header() ) { - availableHeight -= settings.header.height(); + availableHeight -= headerHeight; } if ( t.footer() ) { - availableHeight -= settings.footer.height(); + availableHeight -= footerHeight; } } availableHeight -= offsetTop; - availableHeight -= settings.container.height() - ( offsetTop + settings.table.height() ); + availableHeight -= containerHeight - ( offsetTop + tableHeight ); if ( !isNaN( parseFloat( delta ) ) && isFinite( delta ) ) { availableHeight -= delta; @@ -155,23 +168,42 @@ PageResize.prototype = { var body = this.contentDocument.body; var height = body.offsetHeight; - this.contentDocument.defaultView.onresize = function () { - var newHeight = body.clientHeight || body.offsetHeight; - - if ( newHeight !== height ) { - height = newHeight; + this.contentDocument.defaultView.onresize = function () { + + var newHeight = body.clientHeight || body.offsetHeight; + if (newHeight !== height) { + height = newHeight; + that._size(); + return; + } + + // Width changes might lead to layout changes, which might require + // resizing the table + if (that.sizes.offsetTop !== that._getOffsetTop() + || that.sizes.containerHeight !== that._getContainerHeight() + || that.sizes.tableHeight !== that._getTableHeight() + || that.sizes.headerHeight !== that._getHeaderHeight() + || that.sizes.footerHeight !== that._getFooterHeight()) { + that._size(); + return; + } - that._size(); - } }; }; obj .appendTo( this.s.host ) - .attr( 'data', 'about:blank' ); + .attr( 'data', 'about:blank' ); + + this.s.obj = obj; + }, + + _getOffsetTop: function () { return $(this.s.table).offset().top; }, + _getTableHeight: function () { return this.s.table.height(); }, + _getContainerHeight: function () { return this.s.container.height(); }, + _getHeaderHeight: function () { return this.s.dt.table().header() ? this.s.header.height() : 0; }, + _getFooterHeight: function () { return this.s.dt.table().footer() ? this.s.footer.height() : 0; } - this.s.obj = obj; - } };