Resize on layout changes due to width changes

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 () {
+            this.contentDocument.defaultView.onresize = function () {
-				var newHeight = body.clientHeight || body.offsetHeight;
+
-
+                var newHeight = body.clientHeight || body.offsetHeight;
-				if ( newHeight !== height ) {
+                if (newHeight !== height) {
-					height = newHeight;
+                    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;
-    }
 };