rooty/DataTables
1
0
Fork 0
mirror of https://github.com/DataTables/DataTables.git synced 2025-01-30 23:52:11 +01:00
Code Issues Releases Activity

New: DataTables tables resize automatically with window (and width="100%" attr)

Browse Source 
- 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.datatables-commit-sync
View File

@ -1 +1 @@
6ce86aedafd9cdc882b15c8fa069a156791ede89
8401eab9328f17b363d5b693bd65caecd7a0c994

129
media/js/jquery.dataTables.js vendored
View File

@ -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