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:
parent
b00180b71e
commit
d5eb393df9
@ -1 +1 @@
|
|||||||
6ce86aedafd9cdc882b15c8fa069a156791ede89
|
8401eab9328f17b363d5b693bd65caecd7a0c994
|
||||||
|
129
media/js/jquery.dataTables.js
vendored
129
media/js/jquery.dataTables.js
vendored
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user