1
0
mirror of https://github.com/DataTables/DataTables.git synced 2025-03-02 03:29:14 +01:00

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...
This commit is contained in:
Allan Jardine 2013-08-14 12:15:18 +01:00
parent b00180b71e
commit d5eb393df9
2 changed files with 89 additions and 42 deletions

@ -1 +1 @@
6ce86aedafd9cdc882b15c8fa069a156791ede89 8401eab9328f17b363d5b693bd65caecd7a0c994

@ -356,22 +356,30 @@
/** /**
* Adjust the table column widths for new data. Note: you would probably want to * Adjust the table column widths for new data. Note: you would probably want to
* do a redraw after calling this function! * do a redraw after calling this function!
* @param {object} oSettings dataTables settings object * @param {object} settings dataTables settings object
* @memberof DataTable#oApi * @memberof DataTable#oApi
*/ */
function _fnAdjustColumnSizing ( oSettings ) function _fnAdjustColumnSizing ( settings )
{ {
/* Not interested in doing column width calculation if auto-width is disabled */ /* Not interested in doing column width calculation if auto-width is disabled */
if ( oSettings.oFeatures.bAutoWidth !== false ) if ( settings.oFeatures.bAutoWidth !== false )
{ {
_fnCalculateColumnWidths( oSettings ); var columns = settings.aoColumns;
for ( var i=0 , iLen=oSettings.aoColumns.length ; i<iLen ; i++ )
_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 ) 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 iUserInputs = 0;
var iTmpWidth; var iTmpWidth;
var iVisibleColumns = 0; var iVisibleColumns = 0;
var iColums = oSettings.aoColumns.length; var iColums = columns.length;
var i, iIndex, iCorrector, iWidth; var i, iIndex, iCorrector, iWidth;
var oHeaders = $('th', oSettings.nTHead); var oHeaders = $('th', oSettings.nTHead);
var widthAttr = oSettings.nTable.getAttribute('width'); var widthAttr = table.getAttribute('width');
var nWrapper = oSettings.nTable.parentNode; var nWrapper = table.parentNode;
/* Convert any user input sizes into pixel sizes */ /* Convert any user input sizes into pixel sizes */
for ( i=0 ; i<iColums ; i++ ) for ( i=0 ; i<iColums ; i++ )
{ {
if ( oSettings.aoColumns[i].bVisible ) if ( columns[i].bVisible )
{ {
iVisibleColumns++; iVisibleColumns++;
if ( oSettings.aoColumns[i].sWidth !== null ) if ( columns[i].sWidth !== null )
{ {
iTmpWidth = _fnConvertToWidth( oSettings.aoColumns[i].sWidthOrig, iTmpWidth = _fnConvertToWidth( columns[i].sWidthOrig,
nWrapper ); nWrapper );
if ( iTmpWidth !== null ) if ( iTmpWidth !== null )
{ {
oSettings.aoColumns[i].sWidth = _fnStringToCss( iTmpWidth ); columns[i].sWidth = _fnStringToCss( iTmpWidth );
} }
iUserInputs++; iUserInputs++;
@ -3514,12 +3525,12 @@
if ( iColums == oHeaders.length && iUserInputs === 0 && iVisibleColumns == iColums && if ( iColums == oHeaders.length && iUserInputs === 0 && iVisibleColumns == iColums &&
oSettings.oScroll.sX === "" && oSettings.oScroll.sY === "" ) 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(); iTmpWidth = $(oHeaders[i]).width();
if ( iTmpWidth !== null ) if ( iTmpWidth !== null )
{ {
oSettings.aoColumns[i].sWidth = _fnStringToCss( iTmpWidth ); columns[i].sWidth = _fnStringToCss( iTmpWidth );
} }
} }
} }
@ -3531,7 +3542,7 @@
* calculating table widths. * calculating table widths.
*/ */
var var
nCalcTmp = oSettings.nTable.cloneNode( false ), nCalcTmp = table.cloneNode( false ),
nTheadClone = oSettings.nTHead.cloneNode(true), nTheadClone = oSettings.nTHead.cloneNode(true),
nBody = document.createElement( 'tbody' ), nBody = document.createElement( 'tbody' ),
nTr = document.createElement( 'tr' ), nTr = document.createElement( 'tr' ),
@ -3562,12 +3573,13 @@
iCorrector = 0; iCorrector = 0;
for ( i=0 ; i<iColums ; i++ ) for ( i=0 ; i<iColums ; i++ )
{ {
var oColumn = oSettings.aoColumns[i]; column = columns[i];
if ( oColumn.bVisible && oColumn.sWidthOrig !== null && oColumn.sWidthOrig !== "" )
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 = ""; nThs[i-iCorrector].style.width = "";
} }
@ -3580,15 +3592,17 @@
/* Find the biggest td for each column and put it into the table */ /* Find the biggest td for each column and put it into the table */
for ( i=0 ; i<iColums ; i++ ) for ( i=0 ; i<iColums ; i++ )
{ {
if ( oSettings.aoColumns[i].bVisible ) column = columns[i];
if ( column.bVisible )
{ {
var nTd = _fnGetWidestNode( oSettings, i ); var nTd = _fnGetWidestNode( oSettings, i );
if ( nTd !== null ) if ( nTd !== null )
{ {
nTd = nTd.cloneNode(true); 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 ); nTr.appendChild( nTd );
} }
@ -3646,17 +3660,19 @@
{ {
var iTotal = 0; var iTotal = 0;
iCorrector = 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(); iTotal += $(oNodes[iCorrector]).outerWidth();
} }
else else
{ {
iTotal += parseInt(oSettings.aoColumns[i].sWidth.replace('px',''), 10) + iTotal += parseInt(column.sWidth.replace('px',''), 10) +
($(oNodes[iCorrector]).outerWidth() - $(oNodes[iCorrector]).width()); ($(oNodes[iCorrector]).outerWidth() - $(oNodes[iCorrector]).width());
} }
iCorrector++; iCorrector++;
@ -3664,45 +3680,76 @@
} }
nCalcTmp.style.width = _fnStringToCss( iTotal ); nCalcTmp.style.width = _fnStringToCss( iTotal );
oSettings.nTable.style.width = _fnStringToCss( iTotal ); table.style.width = _fnStringToCss( iTotal );
} }
iCorrector = 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 )
{ {
iWidth = $(oNodes[iCorrector]).width(); iWidth = $(oNodes[iCorrector]).width();
if ( iWidth !== null && iWidth > 0 ) if ( iWidth !== null && iWidth > 0 )
{ {
oSettings.aoColumns[i].sWidth = _fnStringToCss( iWidth ); column.sWidth = _fnStringToCss( iWidth );
} }
iCorrector++; iCorrector++;
} }
} }
var cssWidth = $(nCalcTmp).css('width'); var cssWidth = $(nCalcTmp).css('width');
oSettings.nTable.style.width = (cssWidth.indexOf('%') !== -1) ? table.style.width = (cssWidth.indexOf('%') !== -1) ?
cssWidth : _fnStringToCss( $(nCalcTmp).outerWidth() ); cssWidth : _fnStringToCss( $(nCalcTmp).outerWidth() );
nCalcTmp.parentNode.removeChild( nCalcTmp ); nCalcTmp.parentNode.removeChild( nCalcTmp );
} }
if ( widthAttr ) if ( widthAttr )
{ {
oSettings.nTable.style.width = _fnStringToCss( widthAttr ); table.style.width = _fnStringToCss( widthAttr );
if ( ! oSettings._attachedResizing && if ( ! oSettings._reszEvt )
(oSettings.oScroll.sY !== '' || oSettings.oScroll.sX !== '') )
{ {
$(window).bind('resize.DT-'+oSettings.sInstance, function () { $(window).bind('resize.DT-'+oSettings.sInstance, throttle( function () {
_fnScrollDraw( oSettings ); _fnAdjustColumnSizing( oSettings );
} ); } ) );
oSettings._attachedResizing = true;
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 * Adjust a table's width to take account of scrolling
* @param {object} oSettings dataTables settings object * @param {object} oSettings dataTables settings object