1
0
mirror of https://github.com/DataTables/DataTables.git synced 2025-01-19 12:52:11 +01:00

Removed - bAutoCss and refactor scrolling functions for size

- The bAutoCss parameter is not one that I've ever actually seen used,
  so I've dropped it out here to reduce complexity. It was only useful
  for making the scrollbars always visible on the table, which can just
  as easily be done with `div.dataTables_scrollBody { overflow: scroll
  !important }` since that will take a heigher priority that the
  DataTables appled style.

- The moster _fnFeatureHtmlTable and _fnScrollDraw functions have been
  refactors, saving around 1.5K in size (in the minified file)
This commit is contained in:
Allan Jardine 2013-10-10 17:46:59 +01:00
parent fb2f40a455
commit b178ab69a2
2 changed files with 296 additions and 345 deletions

View File

@ -1 +1 @@
1961e26b6a8d8de91c784da88091899cd478dd4c 589cef0c08c3206e5fa86f114188fcd58a3f0eb8

View File

@ -2948,450 +2948,434 @@
/** /**
* Add any control elements for the table - specifically scrolling * Add any control elements for the table - specifically scrolling
* @param {object} oSettings dataTables settings object * @param {object} settings dataTables settings object
* @returns {node} Node to add to the DOM * @returns {node} Node to add to the DOM
* @memberof DataTable#oApi * @memberof DataTable#oApi
*/ */
function _fnFeatureHtmlTable ( oSettings ) function _fnFeatureHtmlTable ( settings )
{ {
/* Check if scrolling is enabled or not - if not then leave the DOM unaltered */ var scroll = settings.oScroll;
if ( oSettings.oScroll.sX === "" && oSettings.oScroll.sY === "" )
{ if ( scroll.sX === '' && scroll.sY === '' ) {
return oSettings.nTable; return;
}
var scrollX = scroll.sX;
var scrollY = scroll.sY;
var classes = settings.oClasses;
var table = $(settings.nTable);
var caption = table.children('caption');
var captionSide = caption.length ? caption[0]._captionSide : null;
var headerClone = $( table[0].cloneNode(false) );
var footerClone = $( table[0].cloneNode(false) );
var footer = table.children('tfoot');
var _div = '<div/>';
var size = function ( s ) {
return !s ? null : _fnStringToCss( s );
};
if ( ! footer.length ) {
footer = null;
} }
/* /*
* The HTML structure that we want to generate in this function is: * The HTML structure that we want to generate in this function is:
* div - nScroller * div - scroller
* div - nScrollHead * div - scroll head
* div - nScrollHeadInner * div - scroll head inner
* table - nScrollHeadTable * table - scroll head table
* thead - nThead * thead - thead
* div - nScrollBody * div - scroll body
* table - oSettings.nTable * table - table (master table)
* thead - nTheadSize * thead - thead clone for sizing
* tbody - nTbody * tbody - tbody
* div - nScrollFoot * div - scroll foot
* div - nScrollFootInner * div - scroll foot inner
* table - nScrollFootTable * table - scroll foot table
* tfoot - nTfoot * tfoot - tfoot
*/ */
var var scroller = $( _div, { 'class': classes.sScrollWrapper } )
nScroller = document.createElement('div'), .append(
nScrollHead = document.createElement('div'), $(_div, { 'class': classes.sScrollHead } )
nScrollHeadInner = document.createElement('div'), .css( {
nScrollBody = document.createElement('div'), overflow: 'hidden',
nScrollFoot = document.createElement('div'), position: 'relative',
nScrollFootInner = document.createElement('div'), border: 0,
nScrollHeadTable = oSettings.nTable.cloneNode(false), width: scrollX ? size(scrollX) : '100%'
nScrollFootTable = oSettings.nTable.cloneNode(false), } )
nThead = oSettings.nTable.getElementsByTagName('thead')[0], .append(
nTfoot = oSettings.nTable.getElementsByTagName('tfoot').length === 0 ? null : $(_div, { 'class': classes.sScrollHeadInner } )
oSettings.nTable.getElementsByTagName('tfoot')[0], .css( {
oClasses = oSettings.oClasses; 'box-sizing': 'content-box',
width: scroll.sXInner || '100%'
} )
.append(
headerClone
.removeAttr('id')
.css( 'margin-left', 0 )
.append(
table.children('thead')
)
)
)
.append( captionSide === 'top' ? caption : null )
)
.append(
$(_div, { 'class': classes.sScrollBody } )
.css( {
overflow: 'auto',
height: size( scrollY ),
width: size( scrollX )
} )
.append( table )
);
nScrollHead.appendChild( nScrollHeadInner ); if ( footer ) {
nScrollFoot.appendChild( nScrollFootInner ); scroller.append(
nScrollBody.appendChild( oSettings.nTable ); $(_div, { 'class': classes.sScrollFoot } )
nScroller.appendChild( nScrollHead ); .css( {
nScroller.appendChild( nScrollBody ); overflow: 'hidden',
nScrollHeadInner.appendChild( nScrollHeadTable ); border: 0,
nScrollHeadTable.appendChild( nThead ); width: scrollX ? size(scrollX) : '100%'
if ( nTfoot !== null ) } )
{ .append(
nScroller.appendChild( nScrollFoot ); $(_div, { 'class': classes.sScrollFootInner } )
nScrollFootInner.appendChild( nScrollFootTable ); .append(
nScrollFootTable.appendChild( nTfoot ); footerClone
.removeAttr('id')
.css( 'margin-left', 0 )
.append(
table.children('tfoot')
)
)
)
.append( captionSide === 'bottom' ? caption : null )
);
} }
nScroller.className = oClasses.sScrollWrapper; var children = scroller.children();
nScrollHead.className = oClasses.sScrollHead; var scrollHead = children[0];
nScrollHeadInner.className = oClasses.sScrollHeadInner; var scrollBody = children[1];
nScrollBody.className = oClasses.sScrollBody; var scrollFoot = footer ? children[2] : null;
nScrollFoot.className = oClasses.sScrollFoot;
nScrollFootInner.className = oClasses.sScrollFootInner;
if ( oSettings.oScroll.bAutoCss ) // When the body is scrolled, then we also want to scroll the headers
{ if ( scrollX ) {
nScrollHead.style.overflow = "hidden"; $(scrollBody).scroll( function (e) {
nScrollHead.style.position = "relative"; var scrollLeft = this.scrollLeft;
nScrollFoot.style.overflow = "hidden";
nScrollBody.style.overflow = "auto";
}
nScrollHead.style.border = "0"; scrollHead.scrollLeft = scrollLeft;
nScrollHead.style.width = "100%";
nScrollFoot.style.border = "0";
$(nScrollHeadInner).css('box-sizing', 'content-box');
nScrollHeadInner.style.width = oSettings.oScroll.sXInner !== "" ?
oSettings.oScroll.sXInner : "100%"; /* will be overwritten */
/* Modify attributes to respect the clones */ if ( footer ) {
nScrollHeadTable.removeAttribute('id'); scrollFoot.scrollLeft = scrollLeft;
nScrollHeadTable.style.marginLeft = "0";
oSettings.nTable.style.marginLeft = "0";
if ( nTfoot !== null )
{
nScrollFootTable.removeAttribute('id');
nScrollFootTable.style.marginLeft = "0";
}
/* Move caption elements from the body to the header, footer or leave where it is
* depending on the configuration. Note that the DTD says there can be only one caption */
var nCaption = $(oSettings.nTable).children('caption');
if ( nCaption.length > 0 )
{
nCaption = nCaption[0];
if ( nCaption._captionSide === "top" )
{
nScrollHeadTable.appendChild( nCaption );
}
else if ( nCaption._captionSide === "bottom" && nTfoot )
{
nScrollFootTable.appendChild( nCaption );
}
}
/*
* Sizing
*/
/* When x-scrolling add the width and a scroller to move the header with the body */
if ( oSettings.oScroll.sX !== "" )
{
nScrollHead.style.width = _fnStringToCss( oSettings.oScroll.sX );
nScrollBody.style.width = _fnStringToCss( oSettings.oScroll.sX );
if ( nTfoot !== null )
{
nScrollFoot.style.width = _fnStringToCss( oSettings.oScroll.sX );
}
/* When the body is scrolled, then we also want to scroll the headers */
$(nScrollBody).scroll( function (e) {
nScrollHead.scrollLeft = this.scrollLeft;
if ( nTfoot !== null )
{
nScrollFoot.scrollLeft = this.scrollLeft;
} }
} ); } );
} }
/* When yscrolling, add the height */ settings.nScrollHead = scrollHead;
if ( oSettings.oScroll.sY !== "" ) settings.nScrollBody = scrollBody;
{ settings.nScrollFoot = scrollFoot;
nScrollBody.style.height = _fnStringToCss( oSettings.oScroll.sY );
}
/* Redraw - align columns across the tables */ // On redraw - align columns
oSettings.aoDrawCallback.push( { settings.aoDrawCallback.push( {
"fn": _fnScrollDraw, "fn": _fnScrollDraw,
"sName": "scrolling" "sName": "scrolling"
} ); } );
oSettings.nScrollHead = nScrollHead; return scroller[0];
oSettings.nScrollFoot = nScrollFoot;
return nScroller;
} }
/** /**
* Update the various tables for resizing. It's a bit of a pig this function, but * Update the header, footer and body tables for resizing - i.e. column
* basically the idea to: * alignment.
*
* Welcome to the most horrible function DataTables. The process that this
* function follows is basically:
* 1. Re-create the table inside the scrolling div * 1. Re-create the table inside the scrolling div
* 2. Take live measurements from the DOM * 2. Take live measurements from the DOM
* 3. Apply the measurements * 3. Apply the measurements to align the columns
* 4. Clean up * 4. Clean up
* @param {object} o dataTables settings object *
* @returns {node} Node to add to the DOM * @param {object} settings dataTables settings object
* @memberof DataTable#oApi * @memberof DataTable#oApi
*/ */
function _fnScrollDraw ( o ) function _fnScrollDraw ( settings )
{ {
// Given that this is such a monster function, a lot of variables are use
// to try and keep the minimised size as small as possible
var var
nScrollHeadInner = o.nScrollHead.getElementsByTagName('div')[0], scroll = settings.oScroll,
nScrollHeadTable = nScrollHeadInner.getElementsByTagName('table')[0], scrollX = scroll.sX,
nScrollBody = o.nTable.parentNode, scrollXInner = scroll.sXInner,
i, iLen, j, jLen, anHeadToSize, anHeadSizers, anFootSizers, anFootToSize, oStyle, iVis, scrollY = scroll.sY,
nTheadSize, nTfootSize, barWidth = scroll.iBarWidth,
iWidth, aApplied=[], aAppliedFooter=[], iSanityWidth, divHeader = $(settings.nScrollHead),
nScrollFootInner = (o.nTFoot !== null) ? o.nScrollFoot.getElementsByTagName('div')[0] : null, divHeaderStyle = divHeader[0].style,
nScrollFootTable = (o.nTFoot !== null) ? nScrollFootInner.getElementsByTagName('table')[0] : null, divHeaderInner = divHeader.children('div'),
ie67 = o.oBrowser.bScrollOversize, divHeaderInnerStyle = divHeaderInner[0].style,
divHeaderTable = divHeaderInner.children('table'),
divBodyEl = settings.nScrollBody,
divBody = $(divBodyEl),
divBodyStyle = divBodyEl.style,
divFooter = $(settings.nScrollFoot),
divFooterInner = divFooter.children('div'),
divFooterTable = divFooterInner.children('table'),
header = $(settings.nTHead),
table = $(settings.nTable),
tableEl = table[0],
tableStyle = tableEl.style,
footer = settings.nTFoot ? $(settings.nTFoot) : null,
browser = settings.oBrowser,
ie67 = browser.bScrollOversize,
headerTrgEls, footerTrgEls,
headerSrcEls, footerSrcEls,
headerCopy, footerCopy,
headerWidths=[], footerWidths=[],
idx, correction, sanityWidth,
zeroOut = function(nSizer) { zeroOut = function(nSizer) {
oStyle = nSizer.style; var style = nSizer.style;
oStyle.paddingTop = "0"; style.paddingTop = "0";
oStyle.paddingBottom = "0"; style.paddingBottom = "0";
oStyle.borderTopWidth = "0"; style.borderTopWidth = "0";
oStyle.borderBottomWidth = "0"; style.borderBottomWidth = "0";
oStyle.height = 0; style.height = 0;
}; };
/* /*
* 1. Re-create the table inside the scrolling div * 1. Re-create the table inside the scrolling div
*/ */
/* Remove the old minimised thead and tfoot elements in the inner table */ // Remove the old minimised thead and tfoot elements in the inner table
$(o.nTable).children('thead, tfoot').remove(); table.children('thead, tfoot').remove();
/* Clone the current header and footer elements and then place it into the inner table */ // Clone the current header and footer elements and then place it into the inner table
nTheadSize = $(o.nTHead).clone()[0]; headerCopy = header.clone().prependTo( table );
o.nTable.insertBefore( nTheadSize, o.nTable.childNodes[0] ); headerTrgEls = header.find('tr'); // original header is in its own table
anHeadToSize = o.nTHead.getElementsByTagName('tr'); headerSrcEls = headerCopy.find('tr');
anHeadSizers = nTheadSize.getElementsByTagName('tr'); headerCopy.find('th, td').removeAttr('tabindex');
$('th, td', nTheadSize).removeAttr('tabindex');
if ( o.nTFoot !== null ) if ( footer ) {
{ footerCopy = footer.clone().prependTo( table );
nTfootSize = $(o.nTFoot).clone()[0]; footerTrgEls = footer.find('tr'); // the original tfoot is in its own table and must be sized
o.nTable.insertBefore( nTfootSize, o.nTable.childNodes[1] ); footerSrcEls = footerCopy.find('tr');
anFootToSize = o.nTFoot.getElementsByTagName('tr');
anFootSizers = nTfootSize.getElementsByTagName('tr');
} }
/* /*
* 2. Take live measurements from the DOM - do not alter the DOM itself! * 2. Take live measurements from the DOM - do not alter the DOM itself!
*/ */
/* Remove old sizing and apply the calculated column widths // Remove old sizing and apply the calculated column widths
* Get the unique column headers in the newly created (cloned) header. We want to apply the // Get the unique column headers in the newly created (cloned) header. We want to apply the
* calculated sizes to this header // calculated sizes to this header
*/ if ( ! scrollX )
if ( o.oScroll.sX === "" )
{ {
nScrollBody.style.width = '100%'; divBodyStyle.width = '100%';
nScrollHeadInner.parentNode.style.width = '100%'; divHeader[0].style.width = '100%';
} }
var nThs = _fnGetUniqueThs( o, nTheadSize ); $.each( _fnGetUniqueThs( settings, headerCopy ), function ( i, el ) {
for ( i=0, iLen=nThs.length ; i<iLen ; i++ ) idx = _fnVisibleToColumnIndex( settings, i );
{ el.style.width = settings.aoColumns[idx].sWidth;
iVis = _fnVisibleToColumnIndex( o, i ); } );
nThs[i].style.width = o.aoColumns[iVis].sWidth;
}
if ( o.nTFoot !== null ) if ( footer ) {
{
_fnApplyToChildren( function(n) { _fnApplyToChildren( function(n) {
n.style.width = ""; n.style.width = "";
}, anFootSizers ); }, footerSrcEls );
} }
// If scroll collapse is enabled, when we put the headers back into the body for sizing, we // If scroll collapse is enabled, when we put the headers back into the body for sizing, we
// will end up forcing the scrollbar to appear, making our measurements wrong for when we // will end up forcing the scrollbar to appear, making our measurements wrong for when we
// then hide it (end of this function), so add the header height to the body scroller. // then hide it (end of this function), so add the header height to the body scroller.
if ( o.oScroll.bCollapse && o.oScroll.sY !== "" ) if ( scroll.bCollapse && scrollY !== "" ) {
{ divBodyStyle.height = (divBody.offsetHeight + header[0].offsetHeight)+"px";
nScrollBody.style.height = (nScrollBody.offsetHeight + o.nTHead.offsetHeight)+"px";
} }
/* Size the table as a whole */ // Size the table as a whole
iSanityWidth = $(o.nTable).outerWidth(); sanityWidth = table.outerWidth();
if ( o.oScroll.sX === "" ) if ( scrollX === "" ) {
{ // No x scrolling
/* No x scrolling */ tableStyle.width = "100%";
o.nTable.style.width = "100%";
/* I know this is rubbish - but IE7 will make the width of the table when 100% include // IE7 will make the width of the table when 100% include the scrollbar
* the scrollbar - which is shouldn't. When there is a scrollbar we need to take this // - which is shouldn't. When there is a scrollbar we need to take this
* into account. // into account.
*/ if ( ie67 && (table.find('tbody').height() > divBodyEl.offsetHeight ||
if ( ie67 && ($('tbody', nScrollBody).height() > nScrollBody.offsetHeight || divBody.css('overflow-y') == "scroll")
$(nScrollBody).css('overflow-y') == "scroll") ) ) {
{ tableStyle.width = _fnStringToCss( table.outerWidth() - barWidth);
o.nTable.style.width = _fnStringToCss( $(o.nTable).outerWidth() - o.oScroll.iBarWidth);
} }
} }
else else
{ {
if ( o.oScroll.sXInner !== "" ) // x scrolling
{ if ( scrollXInner !== "" ) {
/* x scroll inner has been given - use it */ // x scroll inner has been given - use it
o.nTable.style.width = _fnStringToCss(o.oScroll.sXInner); tableStyle.width = _fnStringToCss(scrollXInner);
} }
else if ( iSanityWidth == $(nScrollBody).width() && else if ( sanityWidth == divBody.width() && divBody.height() < table.height() ) {
$(nScrollBody).height() < $(o.nTable).height() ) // There is y-scrolling - try to take account of the y scroll bar
{ tableStyle.width = _fnStringToCss( sanityWidth-barWidth );
/* There is y-scrolling - try to take account of the y scroll bar */ if ( table.outerWidth() > sanityWidth-barWidth ) {
o.nTable.style.width = _fnStringToCss( iSanityWidth-o.oScroll.iBarWidth ); // Not possible to take account of it
if ( $(o.nTable).outerWidth() > iSanityWidth-o.oScroll.iBarWidth ) tableStyle.width = _fnStringToCss( sanityWidth );
{
/* Not possible to take account of it */
o.nTable.style.width = _fnStringToCss( iSanityWidth );
} }
} }
else else {
{ // When all else fails
/* All else fails */ tableStyle.width = _fnStringToCss( sanityWidth );
o.nTable.style.width = _fnStringToCss( iSanityWidth );
} }
} }
/* Recalculate the sanity width - now that we've applied the required width, before it was // Recalculate the sanity width - now that we've applied the required width,
* a temporary variable. This is required because the column width calculation is done // before it was a temporary variable. This is required because the column
* before this table DOM is created. // width calculation is done before this table DOM is created.
*/ sanityWidth = table.outerWidth();
iSanityWidth = $(o.nTable).outerWidth();
/* We want the hidden header to have zero height, so remove padding and borders. Then // Hidden header should have zero height, so remove padding and borders. Then
* set the width based on the real headers // set the width based on the real headers
*/
// Apply all styles in one pass. Invalidates layout only once because we don't read any // Apply all styles in one pass
// DOM properties. _fnApplyToChildren( zeroOut, headerSrcEls );
_fnApplyToChildren( zeroOut, anHeadSizers );
// Read all widths in next pass. Forces layout only once because we do not change // Read all widths in next pass
// any DOM properties.
_fnApplyToChildren( function(nSizer) { _fnApplyToChildren( function(nSizer) {
aApplied.push( _fnStringToCss( $(nSizer).css('width') ) ); headerWidths.push( _fnStringToCss( $(nSizer).css('width') ) );
}, anHeadSizers ); }, headerSrcEls );
// Apply all widths in final pass. Invalidates layout only once because we do not // Apply all widths in final pass
// read any DOM properties.
_fnApplyToChildren( function(nToSize, i) { _fnApplyToChildren( function(nToSize, i) {
nToSize.style.width = aApplied[i]; nToSize.style.width = headerWidths[i];
}, anHeadToSize ); }, headerTrgEls );
$(anHeadSizers).height(0); $(headerSrcEls).height(0);
/* Same again with the footer if we have one */ /* Same again with the footer if we have one */
if ( o.nTFoot !== null ) if ( footer )
{ {
_fnApplyToChildren( zeroOut, anFootSizers ); _fnApplyToChildren( zeroOut, footerSrcEls );
_fnApplyToChildren( function(nSizer) { _fnApplyToChildren( function(nSizer) {
aAppliedFooter.push( _fnStringToCss( $(nSizer).css('width') ) ); footerWidths.push( _fnStringToCss( $(nSizer).css('width') ) );
}, anFootSizers ); }, footerSrcEls );
_fnApplyToChildren( function(nToSize, i) { _fnApplyToChildren( function(nToSize, i) {
nToSize.style.width = aAppliedFooter[i]; nToSize.style.width = footerWidths[i];
}, anFootToSize ); }, footerTrgEls );
$(anFootSizers).height(0); $(footerSrcEls).height(0);
} }
/* /*
* 3. Apply the measurements * 3. Apply the measurements
*/ */
/* "Hide" the header and footer that we used for the sizing. We want to also fix their width // "Hide" the header and footer that we used for the sizing. We want to also fix their width
* to what they currently are // to what they currently are
*/
_fnApplyToChildren( function(nSizer, i) { _fnApplyToChildren( function(nSizer, i) {
nSizer.innerHTML = ""; nSizer.innerHTML = "";
nSizer.style.width = aApplied[i]; nSizer.style.width = headerWidths[i];
}, anHeadSizers ); }, headerSrcEls );
if ( o.nTFoot !== null ) if ( footer )
{ {
_fnApplyToChildren( function(nSizer, i) { _fnApplyToChildren( function(nSizer, i) {
nSizer.innerHTML = ""; nSizer.innerHTML = "";
nSizer.style.width = aAppliedFooter[i]; nSizer.style.width = footerWidths[i];
}, anFootSizers ); }, footerSrcEls );
} }
/* Sanity check that the table is of a sensible width. If not then we are going to get // Sanity check that the table is of a sensible width. If not then we are going to get
* misalignment - try to prevent this by not allowing the table to shrink below its min width // misalignment - try to prevent this by not allowing the table to shrink below its min width
*/ if ( table.outerWidth() < sanityWidth )
if ( $(o.nTable).outerWidth() < iSanityWidth )
{ {
/* The min width depends upon if we have a vertical scrollbar visible or not */ // The min width depends upon if we have a vertical scrollbar visible or not */
var iCorrection = ((nScrollBody.scrollHeight > nScrollBody.offsetHeight || correction = ((divBodyEl.scrollHeight > divBodyEl.offsetHeight ||
$(nScrollBody).css('overflow-y') == "scroll")) ? divBody.css('overflow-y') == "scroll")) ?
iSanityWidth+o.oScroll.iBarWidth : iSanityWidth; sanityWidth+barWidth :
sanityWidth;
/* IE6/7 are a law unto themselves... */ // IE6/7 are a law unto themselves...
if ( ie67 && (nScrollBody.scrollHeight > if ( ie67 && (divBodyEl.scrollHeight >
nScrollBody.offsetHeight || $(nScrollBody).css('overflow-y') == "scroll") ) divBodyEl.offsetHeight || divBody.css('overflow-y') == "scroll")
{ ) {
o.nTable.style.width = _fnStringToCss( iCorrection-o.oScroll.iBarWidth ); tableStyle.width = _fnStringToCss( correction-barWidth );
} }
/* Apply the calculated minimum width to the table wrappers */ // And give the user a warning that we've stopped the table getting too small
nScrollBody.style.width = _fnStringToCss( iCorrection ); if ( scrollX === "" || scrollXInner !== "" ) {
o.nScrollHead.style.width = _fnStringToCss( iCorrection ); _fnLog( settings, 1, 'Possible column misalignment', 6 );
if ( o.nTFoot !== null )
{
o.nScrollFoot.style.width = _fnStringToCss( iCorrection );
}
/* And give the user a warning that we've stopped the table getting too small */
if ( o.oScroll.sX === "" || o.oScroll.sXInner !== "" )
{
_fnLog( o, 1, 'Possible column misalignment', 6 );
} }
} }
else else
{ {
nScrollBody.style.width = _fnStringToCss( '100%' ); correction = '100%';
o.nScrollHead.style.width = _fnStringToCss( '100%' ); }
if ( o.nTFoot !== null ) // Apply to the container elements
{ divBodyStyle.width = _fnStringToCss( correction );
o.nScrollFoot.style.width = _fnStringToCss( '100%' ); divHeaderStyle.width = _fnStringToCss( correction );
}
if ( footer ) {
settings.nScrollFoot.style.width = _fnStringToCss( correction );
} }
/* /*
* 4. Clean up * 4. Clean up
*/ */
if ( o.oScroll.sY === "" ) if ( ! scrollY ) {
{
/* IE7< puts a vertical scrollbar in place (when it shouldn't be) due to subtracting /* IE7< puts a vertical scrollbar in place (when it shouldn't be) due to subtracting
* the scrollbar height from the visible display, rather than adding it on. We need to * the scrollbar height from the visible display, rather than adding it on. We need to
* set the height in order to sort this. Don't want to do it in any other browsers. * set the height in order to sort this. Don't want to do it in any other browsers.
*/ */
if ( ie67 ) if ( ie67 ) {
{ divBodyStyle.height = _fnStringToCss( tableEl.offsetHeight+barWidth );
nScrollBody.style.height = _fnStringToCss( o.nTable.offsetHeight+o.oScroll.iBarWidth );
} }
} }
if ( o.oScroll.sY !== "" && o.oScroll.bCollapse ) if ( scrollY && scroll.bCollapse ) {
{ divBodyStyle.height = _fnStringToCss( scrollY );
nScrollBody.style.height = _fnStringToCss( o.oScroll.sY );
var iExtra = (o.oScroll.sX !== "" && o.nTable.offsetWidth > nScrollBody.offsetWidth) ? var iExtra = (scrollX && tableEl.offsetWidth > divBodyEl.offsetWidth) ?
o.oScroll.iBarWidth : 0; barWidth :
if ( o.nTable.offsetHeight < nScrollBody.offsetHeight ) 0;
{
nScrollBody.style.height = _fnStringToCss( o.nTable.offsetHeight+iExtra ); if ( tableEl.offsetHeight < divBodyEl.offsetHeight ) {
divBodyStyle.height = _fnStringToCss( tableEl.offsetHeight+iExtra );
} }
} }
/* Finally set the width's of the header and footer tables */ /* Finally set the width's of the header and footer tables */
var iOuterWidth = $(o.nTable).outerWidth(); var iOuterWidth = table.outerWidth();
nScrollHeadTable.style.width = _fnStringToCss( iOuterWidth ); divHeaderTable[0].style.width = _fnStringToCss( iOuterWidth );
nScrollHeadInner.style.width = _fnStringToCss( iOuterWidth ); divHeaderInnerStyle.width = _fnStringToCss( iOuterWidth );
// Figure out if there are scrollbar present - if so then we need a the header and footer to // Figure out if there are scrollbar present - if so then we need a the header and footer to
// provide a bit more space to allow "overflow" scrolling (i.e. past the scrollbar) // provide a bit more space to allow "overflow" scrolling (i.e. past the scrollbar)
var bScrolling = $(o.nTable).height() > nScrollBody.clientHeight || $(nScrollBody).css('overflow-y') == "scroll"; var bScrolling = table.height() > divBodyEl.clientHeight || divBody.css('overflow-y') == "scroll";
var padding = o.oBrowser.bScrollbarLeft ? 'paddingLeft' : 'paddingRight'; var padding = 'padding' + (browser.bScrollbarLeft ? 'Left' : 'Right' );
nScrollHeadInner.style[padding] = bScrolling ? o.oScroll.iBarWidth+"px" : "0px"; divHeaderInnerStyle[ padding ] = bScrolling ? barWidth+"px" : "0px";
if ( o.nTFoot !== null ) if ( footer ) {
{ divFooterTable[0].style.width = _fnStringToCss( iOuterWidth );
nScrollFootTable.style.width = _fnStringToCss( iOuterWidth ); divFooterInner[0].style.width = _fnStringToCss( iOuterWidth );
nScrollFootInner.style.width = _fnStringToCss( iOuterWidth ); divFooterInner[0].style[padding] = bScrolling ? barWidth+"px" : "0px";
nScrollFootInner.style[padding] = bScrolling ? o.oScroll.iBarWidth+"px" : "0px";
} }
/* Adjust the position of the header in case we loose the y-scrollbar */ /* Adjust the position of the header in case we loose the y-scrollbar */
$(nScrollBody).scroll(); divBody.scroll();
/* If sorting or filtering has occurred, jump the scrolling back to the top */ /* If sorting or filtering has occurred, jump the scrolling back to the top */
if ( o.bSorted || o.bFiltered ) if ( settings.bSorted || settings.bFiltered ) {
{ divBodyEl.scrollTop = 0;
nScrollBody.scrollTop = 0;
} }
} }
/** /**
* Apply a given function to the display child nodes of an element array (typically * Apply a given function to the display child nodes of an element array (typically
* TD children of TR rows * TD children of TR rows
@ -3405,27 +3389,26 @@
var index=0, i=0, iLen=an1.length; var index=0, i=0, iLen=an1.length;
var nNode1, nNode2; var nNode1, nNode2;
while ( i < iLen ) while ( i < iLen ) {
{
nNode1 = an1[i].firstChild; nNode1 = an1[i].firstChild;
nNode2 = an2 ? an2[i].firstChild : null; nNode2 = an2 ? an2[i].firstChild : null;
while ( nNode1 )
{ while ( nNode1 ) {
if ( nNode1.nodeType === 1 ) if ( nNode1.nodeType === 1 ) {
{ if ( an2 ) {
if ( an2 )
{
fn( nNode1, nNode2, index ); fn( nNode1, nNode2, index );
} }
else else {
{
fn( nNode1, index ); fn( nNode1, index );
} }
index++; index++;
} }
nNode1 = nNode1.nextSibling; nNode1 = nNode1.nextSibling;
nNode2 = an2 ? nNode2.nextSibling : null; nNode2 = an2 ? nNode2.nextSibling : null;
} }
i++; i++;
} }
} }
@ -5603,8 +5586,7 @@
[ "sScrollX", "sX" ], [ "sScrollX", "sX" ],
[ "sScrollXInner", "sXInner" ], [ "sScrollXInner", "sXInner" ],
[ "sScrollY", "sY" ], [ "sScrollY", "sY" ],
[ "bScrollCollapse", "bCollapse" ], [ "bScrollCollapse", "bCollapse" ]
[ "bScrollAutoCss", "bAutoCss" ]
] ); ] );
_fnMap( oSettings.oLanguage, oInit, "fnInfoCallback" ); _fnMap( oSettings.oLanguage, oInit, "fnInfoCallback" );
@ -9430,27 +9412,6 @@
"bRetrieve": false, "bRetrieve": false,
/**
* Indicate if DataTables should be allowed to set the padding / margin
* etc for the scrolling header elements or not. Typically you will want
* this.
* @type boolean
* @default true
*
* @dtopt Options
* @name DataTable.defaults.scrollAutoCss
*
* @example
* $(document).ready( function() {
* $('#example').dataTable( {
* "scrollAutoCss": false,
* "scrollY": "200px"
* } );
* } );
*/
"bScrollAutoCss": true,
/** /**
* When vertical (y) scrolling is enabled, DataTables will force the height of * When vertical (y) scrolling is enabled, DataTables will force the height of
* the table's viewport to the given height at all times (useful for layout). * the table's viewport to the given height at all times (useful for layout).
@ -11978,16 +11939,6 @@
* @namespace * @namespace
*/ */
"oScroll": { "oScroll": {
/**
* Indicate if DataTables should be allowed to set the padding / margin
* etc for the scrolling header elements or not. Typically you will want
* this.
* Note that this parameter will be set by the initialisation routine. To
* set a default use {@link DataTable.defaults}.
* @type boolean
*/
"bAutoCss": null,
/** /**
* When the table is shorter in height than sScrollY, collapse the * When the table is shorter in height than sScrollY, collapse the
* table container down to the height of the table (when true). * table container down to the height of the table (when true).