From d5eb393df9dd7d4610e04e9c3276c5b4951da89c Mon Sep 17 00:00:00 2001
From: Allan Jardine <allan.jardine@sprymedia.co.uk>
Date: Wed, 14 Aug 2013 12:15:18 +0100
Subject: [PATCH] New: DataTables tables resize automatically with window (and
 width="100%" attr)

- DataTables tables previously did not automatically adjust their sizing
  when the window width was changed, which let to a lot of additional
  calls to fnAdjustColumnSizing in peoples code (and support questions
  in the forums). This commit add adjustment to the sizing automatically
  for tables width have width="100%" as an attribute (we can't use CSS
  since we can't know if it is relative or absolute sizing) - extending
  what went before. This has full compatiblity with scrolling and
  non-scrolling tables. A throttle is used to not bring IE to its
  knees...
---
 .datatables-commit-sync       |   2 +-
 media/js/jquery.dataTables.js | 129 +++++++++++++++++++++++-----------
 2 files changed, 89 insertions(+), 42 deletions(-)

diff --git a/.datatables-commit-sync b/.datatables-commit-sync
index 9d0b2736..f1015efb 100644
--- a/.datatables-commit-sync
+++ b/.datatables-commit-sync
@@ -1 +1 @@
-6ce86aedafd9cdc882b15c8fa069a156791ede89
+8401eab9328f17b363d5b693bd65caecd7a0c994
diff --git a/media/js/jquery.dataTables.js b/media/js/jquery.dataTables.js
index 9eecbea4..6f82ade4 100644
--- a/media/js/jquery.dataTables.js
+++ b/media/js/jquery.dataTables.js
@@ -356,22 +356,30 @@
 	/**
 	 * Adjust the table column widths for new data. Note: you would probably want to
 	 * do a redraw after calling this function!
-	 *  @param {object} oSettings dataTables settings object
+	 *  @param {object} settings dataTables settings object
 	 *  @memberof DataTable#oApi
 	 */
-	function _fnAdjustColumnSizing ( oSettings )
+	function _fnAdjustColumnSizing ( settings )
 	{
 		/* Not interested in doing column width calculation if auto-width is disabled */
-		if ( oSettings.oFeatures.bAutoWidth !== false )
+		if ( settings.oFeatures.bAutoWidth !== false )
 		{
-			_fnCalculateColumnWidths( oSettings );
-			for ( var i=0 , iLen=oSettings.aoColumns.length ; i<iLen ; i++ )
+			var columns = settings.aoColumns;
+	
+			_fnCalculateColumnWidths( settings );
+			for ( var i=0 , iLen=columns.length ; i<iLen ; i++ )
 			{
-				oSettings.aoColumns[i].nTh.style.width = oSettings.aoColumns[i].sWidth;
+				columns[i].nTh.style.width = columns[i].sWidth;
 			}
 		}
 	
-		_fnCallbackFire( oSettings, null, 'column-sizing', [oSettings] );
+		var scroll = settings.oScroll;
+		if ( scroll.sY !== '' || scroll.sX !== '')
+		{
+			_fnScrollDraw( settings );
+		}
+	
+		_fnCallbackFire( settings, null, 'column-sizing', [settings] );
 	}
 	
 	
@@ -3476,30 +3484,33 @@
 	 */
 	function _fnCalculateColumnWidths ( oSettings )
 	{
-		var iTableWidth = oSettings.nTable.offsetWidth;
+		var table = oSettings.nTable;
+		var columns = oSettings.aoColumns;
+		var column;
+		var iTableWidth = table.offsetWidth;
 		var iUserInputs = 0;
 		var iTmpWidth;
 		var iVisibleColumns = 0;
-		var iColums = oSettings.aoColumns.length;
+		var iColums = columns.length;
 		var i, iIndex, iCorrector, iWidth;
 		var oHeaders = $('th', oSettings.nTHead);
-		var widthAttr = oSettings.nTable.getAttribute('width');
-		var nWrapper = oSettings.nTable.parentNode;
+		var widthAttr = table.getAttribute('width');
+		var nWrapper = table.parentNode;
 	
 		/* Convert any user input sizes into pixel sizes */
 		for ( i=0 ; i<iColums ; i++ )
 		{
-			if ( oSettings.aoColumns[i].bVisible )
+			if ( columns[i].bVisible )
 			{
 				iVisibleColumns++;
 	
-				if ( oSettings.aoColumns[i].sWidth !== null )
+				if ( columns[i].sWidth !== null )
 				{
-					iTmpWidth = _fnConvertToWidth( oSettings.aoColumns[i].sWidthOrig,
+					iTmpWidth = _fnConvertToWidth( columns[i].sWidthOrig,
 						nWrapper );
 					if ( iTmpWidth !== null )
 					{
-						oSettings.aoColumns[i].sWidth = _fnStringToCss( iTmpWidth );
+						columns[i].sWidth = _fnStringToCss( iTmpWidth );
 					}
 	
 					iUserInputs++;
@@ -3514,12 +3525,12 @@
 		if ( iColums == oHeaders.length && iUserInputs === 0 && iVisibleColumns == iColums &&
 			oSettings.oScroll.sX === "" && oSettings.oScroll.sY === "" )
 		{
-			for ( i=0 ; i<oSettings.aoColumns.length ; i++ )
+			for ( i=0 ; i<columns.length ; i++ )
 			{
 				iTmpWidth = $(oHeaders[i]).width();
 				if ( iTmpWidth !== null )
 				{
-					oSettings.aoColumns[i].sWidth = _fnStringToCss( iTmpWidth );
+					columns[i].sWidth = _fnStringToCss( iTmpWidth );
 				}
 			}
 		}
@@ -3531,7 +3542,7 @@
 			 * calculating table widths.
 			 */
 			var
-				nCalcTmp = oSettings.nTable.cloneNode( false ),
+				nCalcTmp = table.cloneNode( false ),
 				nTheadClone = oSettings.nTHead.cloneNode(true),
 				nBody = document.createElement( 'tbody' ),
 				nTr = document.createElement( 'tr' ),
@@ -3562,12 +3573,13 @@
 			iCorrector = 0;
 			for ( i=0 ; i<iColums ; i++ )
 			{
-				var oColumn = oSettings.aoColumns[i];
-				if ( oColumn.bVisible && oColumn.sWidthOrig !== null && oColumn.sWidthOrig !== "" )
+				column = columns[i];
+	
+				if ( column.bVisible && column.sWidthOrig !== null && column.sWidthOrig !== "" )
 				{
-					nThs[i-iCorrector].style.width = _fnStringToCss( oColumn.sWidthOrig );
+					nThs[i-iCorrector].style.width = _fnStringToCss( column.sWidthOrig );
 				}
-				else if ( oColumn.bVisible )
+				else if ( column.bVisible )
 				{
 					nThs[i-iCorrector].style.width = "";
 				}
@@ -3580,15 +3592,17 @@
 			/* Find the biggest td for each column and put it into the table */
 			for ( i=0 ; i<iColums ; i++ )
 			{
-				if ( oSettings.aoColumns[i].bVisible )
+				column = columns[i];
+	
+				if ( column.bVisible )
 				{
 					var nTd = _fnGetWidestNode( oSettings, i );
 					if ( nTd !== null )
 					{
 						nTd = nTd.cloneNode(true);
-						if ( oSettings.aoColumns[i].sContentPadding !== "" )
+						if ( column.sContentPadding !== "" )
 						{
-							nTd.innerHTML += oSettings.aoColumns[i].sContentPadding;
+							nTd.innerHTML += column.sContentPadding;
 						}
 						nTr.appendChild( nTd );
 					}
@@ -3646,17 +3660,19 @@
 			{
 				var iTotal = 0;
 				iCorrector = 0;
-				for ( i=0 ; i<oSettings.aoColumns.length ; i++ )
+				for ( i=0 ; i<columns.length ; i++ )
 				{
-					if ( oSettings.aoColumns[i].bVisible )
+					column = columns[i];
+	
+					if ( column.bVisible )
 					{
-						if ( oSettings.aoColumns[i].sWidthOrig === null )
+						if ( column.sWidthOrig === null )
 						{
 							iTotal += $(oNodes[iCorrector]).outerWidth();
 						}
 						else
 						{
-							iTotal += parseInt(oSettings.aoColumns[i].sWidth.replace('px',''), 10) +
+							iTotal += parseInt(column.sWidth.replace('px',''), 10) +
 								($(oNodes[iCorrector]).outerWidth() - $(oNodes[iCorrector]).width());
 						}
 						iCorrector++;
@@ -3664,45 +3680,76 @@
 				}
 	
 				nCalcTmp.style.width = _fnStringToCss( iTotal );
-				oSettings.nTable.style.width = _fnStringToCss( iTotal );
+				table.style.width = _fnStringToCss( iTotal );
 			}
 	
 			iCorrector = 0;
-			for ( i=0 ; i<oSettings.aoColumns.length ; i++ )
+			for ( i=0 ; i<columns.length ; i++ )
 			{
-				if ( oSettings.aoColumns[i].bVisible )
+				column = columns[i];
+	
+				if ( column.bVisible )
 				{
 					iWidth = $(oNodes[iCorrector]).width();
+	
 					if ( iWidth !== null && iWidth > 0 )
 					{
-						oSettings.aoColumns[i].sWidth = _fnStringToCss( iWidth );
+						column.sWidth = _fnStringToCss( iWidth );
 					}
 					iCorrector++;
 				}
 			}
 	
 			var cssWidth = $(nCalcTmp).css('width');
-			oSettings.nTable.style.width = (cssWidth.indexOf('%') !== -1) ?
+			table.style.width = (cssWidth.indexOf('%') !== -1) ?
 			    cssWidth : _fnStringToCss( $(nCalcTmp).outerWidth() );
 			nCalcTmp.parentNode.removeChild( nCalcTmp );
 		}
 	
 		if ( widthAttr )
 		{
-			oSettings.nTable.style.width = _fnStringToCss( widthAttr );
+			table.style.width = _fnStringToCss( widthAttr );
 	
-			if ( ! oSettings._attachedResizing &&
-				(oSettings.oScroll.sY !== '' || oSettings.oScroll.sX !== '') )
+			if ( ! oSettings._reszEvt )
 			{
-				$(window).bind('resize.DT-'+oSettings.sInstance, function () {
-					_fnScrollDraw( oSettings );
-				} );
-				oSettings._attachedResizing = true;
+				$(window).bind('resize.DT-'+oSettings.sInstance, throttle( function () {
+					_fnAdjustColumnSizing( oSettings );
+				} ) );
+	
+				oSettings._reszEvt = true;
 			}
 		}
 	}
 	
 	
+	// @todo Move into a private functions file or make a proper DT function of it
+	function throttle( fn ) {
+		var
+			frequency = 200,
+			last,
+			timer;
+	
+		return function () {
+			var
+				now = +new Date(),
+				args = arguments;
+	
+			if ( last && now < last + frequency ) {
+				clearTimeout( timer );
+	
+				timer = setTimeout( function () {
+					last = now;
+					fn();
+				}, frequency );
+			}
+			else {
+				last = now;
+				fn();
+			}
+		};
+	}
+	
+	
 	/**
 	 * Adjust a table's width to take account of scrolling
 	 *  @param {object} oSettings dataTables settings object