Spaces:
Sleeping
Sleeping
/*! FixedHeader 3.2.1 | |
* ©2009-2021 SpryMedia Ltd - datatables.net/license | |
*/ | |
/** | |
* @summary FixedHeader | |
* @description Fix a table's header or footer, so it is always visible while | |
* scrolling | |
* @version 3.2.1 | |
* @file dataTables.fixedHeader.js | |
* @author SpryMedia Ltd (www.sprymedia.co.uk) | |
* @contact www.sprymedia.co.uk/contact | |
* @copyright Copyright 2009-2021 SpryMedia Ltd. | |
* | |
* This source file is free software, available under the following license: | |
* MIT license - http://datatables.net/license/mit | |
* | |
* This source file is distributed in the hope that it will be useful, but | |
* WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY | |
* or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details. | |
* | |
* For details please refer to: http://www.datatables.net | |
*/ | |
(function( factory ){ | |
if ( typeof define === 'function' && define.amd ) { | |
// AMD | |
define( ['jquery', 'datatables.net'], function ( $ ) { | |
return factory( $, window, document ); | |
} ); | |
} | |
else if ( typeof exports === 'object' ) { | |
// CommonJS | |
module.exports = function (root, $) { | |
if ( ! root ) { | |
root = window; | |
} | |
if ( ! $ || ! $.fn.dataTable ) { | |
$ = require('datatables.net')(root, $).$; | |
} | |
return factory( $, root, root.document ); | |
}; | |
} | |
else { | |
// Browser | |
factory( jQuery, window, document ); | |
} | |
}(function( $, window, document, undefined ) { | |
; | |
var DataTable = $.fn.dataTable; | |
var _instCounter = 0; | |
var FixedHeader = function ( dt, config ) { | |
// Sanity check - you just know it will happen | |
if ( ! (this instanceof FixedHeader) ) { | |
throw "FixedHeader must be initialised with the 'new' keyword."; | |
} | |
// Allow a boolean true for defaults | |
if ( config === true ) { | |
config = {}; | |
} | |
dt = new DataTable.Api( dt ); | |
this.c = $.extend( true, {}, FixedHeader.defaults, config ); | |
this.s = { | |
dt: dt, | |
position: { | |
theadTop: 0, | |
tbodyTop: 0, | |
tfootTop: 0, | |
tfootBottom: 0, | |
width: 0, | |
left: 0, | |
tfootHeight: 0, | |
theadHeight: 0, | |
windowHeight: $(window).height(), | |
visible: true | |
}, | |
headerMode: null, | |
footerMode: null, | |
autoWidth: dt.settings()[0].oFeatures.bAutoWidth, | |
namespace: '.dtfc'+(_instCounter++), | |
scrollLeft: { | |
header: -1, | |
footer: -1 | |
}, | |
enable: true | |
}; | |
this.dom = { | |
floatingHeader: null, | |
thead: $(dt.table().header()), | |
tbody: $(dt.table().body()), | |
tfoot: $(dt.table().footer()), | |
header: { | |
host: null, | |
floating: null, | |
floatingParent: $('<div class="dtfh-floatingparent">'), | |
placeholder: null | |
}, | |
footer: { | |
host: null, | |
floating: null, | |
floatingParent: $('<div class="dtfh-floatingparent">'), | |
placeholder: null | |
} | |
}; | |
this.dom.header.host = this.dom.thead.parent(); | |
this.dom.footer.host = this.dom.tfoot.parent(); | |
var dtSettings = dt.settings()[0]; | |
if ( dtSettings._fixedHeader ) { | |
throw "FixedHeader already initialised on table "+dtSettings.nTable.id; | |
} | |
dtSettings._fixedHeader = this; | |
this._constructor(); | |
}; | |
/* | |
* Variable: FixedHeader | |
* Purpose: Prototype for FixedHeader | |
* Scope: global | |
*/ | |
$.extend( FixedHeader.prototype, { | |
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * | |
* API methods | |
*/ | |
/** | |
* Kill off FH and any events | |
*/ | |
destroy: function () { | |
this.s.dt.off( '.dtfc' ); | |
$(window).off( this.s.namespace ); | |
if ( this.c.header ) { | |
this._modeChange( 'in-place', 'header', true ); | |
} | |
if ( this.c.footer && this.dom.tfoot.length ) { | |
this._modeChange( 'in-place', 'footer', true ); | |
} | |
}, | |
/** | |
* Enable / disable the fixed elements | |
* | |
* @param {boolean} enable `true` to enable, `false` to disable | |
*/ | |
enable: function ( enable, update ) | |
{ | |
this.s.enable = enable; | |
if ( update || update === undefined ) { | |
this._positions(); | |
this._scroll( true ); | |
} | |
}, | |
/** | |
* Get enabled status | |
*/ | |
enabled: function () | |
{ | |
return this.s.enable; | |
}, | |
/** | |
* Set header offset | |
* | |
* @param {int} new value for headerOffset | |
*/ | |
headerOffset: function ( offset ) | |
{ | |
if ( offset !== undefined ) { | |
this.c.headerOffset = offset; | |
this.update(); | |
} | |
return this.c.headerOffset; | |
}, | |
/** | |
* Set footer offset | |
* | |
* @param {int} new value for footerOffset | |
*/ | |
footerOffset: function ( offset ) | |
{ | |
if ( offset !== undefined ) { | |
this.c.footerOffset = offset; | |
this.update(); | |
} | |
return this.c.footerOffset; | |
}, | |
/** | |
* Recalculate the position of the fixed elements and force them into place | |
*/ | |
update: function (force) | |
{ | |
var table = this.s.dt.table().node(); | |
if ( $(table).is(':visible') ) { | |
this.enable( true, false ); | |
} | |
else { | |
this.enable( false, false ); | |
} | |
// Don't update if header is not in the document atm (due to | |
// async events) | |
if ($(table).children('thead').length === 0) { | |
return; | |
} | |
this._positions(); | |
this._scroll( force !== undefined ? force : true ); | |
}, | |
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * | |
* Constructor | |
*/ | |
/** | |
* FixedHeader constructor - adding the required event listeners and | |
* simple initialisation | |
* | |
* @private | |
*/ | |
_constructor: function () | |
{ | |
var that = this; | |
var dt = this.s.dt; | |
$(window) | |
.on( 'scroll'+this.s.namespace, function () { | |
that._scroll(); | |
} ) | |
.on( 'resize'+this.s.namespace, DataTable.util.throttle( function () { | |
that.s.position.windowHeight = $(window).height(); | |
that.update(); | |
}, 50 ) ); | |
var autoHeader = $('.fh-fixedHeader'); | |
if ( ! this.c.headerOffset && autoHeader.length ) { | |
this.c.headerOffset = autoHeader.outerHeight(); | |
} | |
var autoFooter = $('.fh-fixedFooter'); | |
if ( ! this.c.footerOffset && autoFooter.length ) { | |
this.c.footerOffset = autoFooter.outerHeight(); | |
} | |
dt | |
.on( 'column-reorder.dt.dtfc column-visibility.dt.dtfc column-sizing.dt.dtfc responsive-display.dt.dtfc', function (e, ctx) { | |
that.update(); | |
} ) | |
.on( 'draw.dt.dtfc', function (e, ctx) { | |
// For updates from our own table, don't reclone, but for all others, do | |
that.update(ctx === dt.settings()[0] ? false : true); | |
} ); | |
dt.on( 'destroy.dtfc', function () { | |
that.destroy(); | |
} ); | |
this._positions(); | |
this._scroll(); | |
}, | |
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * | |
* Private methods | |
*/ | |
/** | |
* Clone a fixed item to act as a place holder for the original element | |
* which is moved into a clone of the table element, and moved around the | |
* document to give the fixed effect. | |
* | |
* @param {string} item 'header' or 'footer' | |
* @param {boolean} force Force the clone to happen, or allow automatic | |
* decision (reuse existing if available) | |
* @private | |
*/ | |
_clone: function ( item, force ) | |
{ | |
var dt = this.s.dt; | |
var itemDom = this.dom[ item ]; | |
var itemElement = item === 'header' ? | |
this.dom.thead : | |
this.dom.tfoot; | |
// If footer and scrolling is enabled then we don't clone | |
// Instead the table's height is decreased accordingly - see `_scroll()` | |
if (item === 'footer' && this._scrollEnabled()) { | |
return; | |
} | |
if ( ! force && itemDom.floating ) { | |
// existing floating element - reuse it | |
itemDom.floating.removeClass( 'fixedHeader-floating fixedHeader-locked' ); | |
} | |
else { | |
if ( itemDom.floating ) { | |
if(itemDom.placeholder !== null) { | |
itemDom.placeholder.remove(); | |
} | |
this._unsize( item ); | |
itemDom.floating.children().detach(); | |
itemDom.floating.remove(); | |
} | |
var tableNode = $(dt.table().node()); | |
var scrollBody = $(tableNode.parent()); | |
var scrollEnabled = this._scrollEnabled(); | |
itemDom.floating = $( dt.table().node().cloneNode( false ) ) | |
.attr( 'aria-hidden', 'true' ) | |
.css({ | |
'table-layout': 'fixed', | |
top: 0, | |
left: 0 | |
}) | |
.removeAttr( 'id' ) | |
.append( itemElement ); | |
itemDom.floatingParent | |
.css({ | |
width: scrollBody.width(), | |
overflow: 'hidden', | |
height: 'fit-content', | |
position: 'fixed', | |
left: scrollEnabled ? tableNode.offset().left + scrollBody.scrollLeft() : 0 | |
}) | |
.css( | |
item === 'header' ? | |
{ | |
top: this.c.headerOffset, | |
bottom: '' | |
} : | |
{ | |
top: '', | |
bottom: this.c.footerOffset | |
} | |
) | |
.addClass(item === 'footer' ? 'dtfh-floatingparentfoot' : 'dtfh-floatingparenthead') | |
.append(itemDom.floating) | |
.appendTo( 'body' ); | |
this._stickyPosition(itemDom.floating, '-'); | |
var scrollLeftUpdate = () => { | |
var scrollLeft = scrollBody.scrollLeft() | |
this.s.scrollLeft = {footer: scrollLeft, header: scrollLeft}; | |
itemDom.floatingParent.scrollLeft(this.s.scrollLeft.header); | |
} | |
scrollLeftUpdate(); | |
scrollBody.scroll(scrollLeftUpdate) | |
// Insert a fake thead/tfoot into the DataTable to stop it jumping around | |
itemDom.placeholder = itemElement.clone( false ); | |
itemDom.placeholder | |
.find( '*[id]' ) | |
.removeAttr( 'id' ); | |
itemDom.host.prepend( itemDom.placeholder ); | |
// Clone widths | |
this._matchWidths( itemDom.placeholder, itemDom.floating ); | |
} | |
}, | |
/** | |
* This method sets the sticky position of the header elements to match fixed columns | |
* @param {JQuery<HTMLElement>} el | |
* @param {string} sign | |
*/ | |
_stickyPosition(el, sign) { | |
if (this._scrollEnabled()) { | |
var that = this | |
var rtl = $(that.s.dt.table().node()).css('direction') === 'rtl'; | |
el.find('th').each(function() { | |
// Find out if fixed header has previously set this column | |
if ($(this).css('position') === 'sticky') { | |
var right = $(this).css('right'); | |
var left = $(this).css('left'); | |
if (right !== 'auto' && !rtl) { | |
// New position either adds or dismisses the barWidth | |
var potential = +right.replace(/px/g, '') + (sign === '-' ? -1 : 1) * that.s.dt.settings()[0].oBrowser.barWidth; | |
$(this).css('right', potential > 0 ? potential : 0); | |
} | |
else if(left !== 'auto' && rtl) { | |
var potential = +left.replace(/px/g, '') + (sign === '-' ? -1 : 1) * that.s.dt.settings()[0].oBrowser.barWidth; | |
$(this).css('left', potential > 0 ? potential : 0); | |
} | |
} | |
}); | |
} | |
}, | |
/** | |
* Copy widths from the cells in one element to another. This is required | |
* for the footer as the footer in the main table takes its sizes from the | |
* header columns. That isn't present in the footer so to have it still | |
* align correctly, the sizes need to be copied over. It is also required | |
* for the header when auto width is not enabled | |
* | |
* @param {jQuery} from Copy widths from | |
* @param {jQuery} to Copy widths to | |
* @private | |
*/ | |
_matchWidths: function ( from, to ) { | |
var get = function ( name ) { | |
return $(name, from) | |
.map( function () { | |
return $(this).css('width').replace(/[^\d\.]/g, '') * 1; | |
} ).toArray(); | |
}; | |
var set = function ( name, toWidths ) { | |
$(name, to).each( function ( i ) { | |
$(this).css( { | |
width: toWidths[i], | |
minWidth: toWidths[i] | |
} ); | |
} ); | |
}; | |
var thWidths = get( 'th' ); | |
var tdWidths = get( 'td' ); | |
set( 'th', thWidths ); | |
set( 'td', tdWidths ); | |
}, | |
/** | |
* Remove assigned widths from the cells in an element. This is required | |
* when inserting the footer back into the main table so the size is defined | |
* by the header columns and also when auto width is disabled in the | |
* DataTable. | |
* | |
* @param {string} item The `header` or `footer` | |
* @private | |
*/ | |
_unsize: function ( item ) { | |
var el = this.dom[ item ].floating; | |
if ( el && (item === 'footer' || (item === 'header' && ! this.s.autoWidth)) ) { | |
$('th, td', el).css( { | |
width: '', | |
minWidth: '' | |
} ); | |
} | |
else if ( el && item === 'header' ) { | |
$('th, td', el).css( 'min-width', '' ); | |
} | |
}, | |
/** | |
* Reposition the floating elements to take account of horizontal page | |
* scroll | |
* | |
* @param {string} item The `header` or `footer` | |
* @param {int} scrollLeft Document scrollLeft | |
* @private | |
*/ | |
_horizontal: function ( item, scrollLeft ) | |
{ | |
var itemDom = this.dom[ item ]; | |
var position = this.s.position; | |
var lastScrollLeft = this.s.scrollLeft; | |
if ( itemDom.floating && lastScrollLeft[ item ] !== scrollLeft ) { | |
// If scrolling is enabled we need to match the floating header to the body | |
if (this._scrollEnabled()) { | |
var newScrollLeft = $($(this.s.dt.table().node()).parent()).scrollLeft() | |
itemDom.floating.scrollLeft(newScrollLeft); | |
itemDom.floatingParent.scrollLeft(newScrollLeft); | |
} | |
lastScrollLeft[ item ] = scrollLeft; | |
} | |
}, | |
/** | |
* Change from one display mode to another. Each fixed item can be in one | |
* of: | |
* | |
* * `in-place` - In the main DataTable | |
* * `in` - Floating over the DataTable | |
* * `below` - (Header only) Fixed to the bottom of the table body | |
* * `above` - (Footer only) Fixed to the top of the table body | |
* | |
* @param {string} mode Mode that the item should be shown in | |
* @param {string} item 'header' or 'footer' | |
* @param {boolean} forceChange Force a redraw of the mode, even if already | |
* in that mode. | |
* @private | |
*/ | |
_modeChange: function ( mode, item, forceChange ) | |
{ | |
var dt = this.s.dt; | |
var itemDom = this.dom[ item ]; | |
var position = this.s.position; | |
// Just determine if scroll is enabled once | |
var scrollEnabled = this._scrollEnabled(); | |
// If footer and scrolling is enabled then we don't clone | |
// Instead the table's height is decreased accordingly - see `_scroll()` | |
if (item === 'footer' && scrollEnabled) { | |
return; | |
} | |
// It isn't trivial to add a !important css attribute... | |
var importantWidth = function (w) { | |
itemDom.floating.attr('style', function(i,s) { | |
return (s || '') + 'width: '+w+'px !important;'; | |
}); | |
// If not scrolling also have to update the floatingParent | |
if (!scrollEnabled) { | |
itemDom.floatingParent.attr('style', function(i,s) { | |
return (s || '') + 'width: '+w+'px !important;'; | |
}); | |
} | |
}; | |
// Record focus. Browser's will cause input elements to loose focus if | |
// they are inserted else where in the doc | |
var tablePart = this.dom[ item==='footer' ? 'tfoot' : 'thead' ]; | |
var focus = $.contains( tablePart[0], document.activeElement ) ? | |
document.activeElement : | |
null; | |
var scrollBody = $($(this.s.dt.table().node()).parent()); | |
if ( mode === 'in-place' ) { | |
// Insert the header back into the table's real header | |
if ( itemDom.placeholder ) { | |
itemDom.placeholder.remove(); | |
itemDom.placeholder = null; | |
} | |
this._unsize( item ); | |
if ( item === 'header' ) { | |
itemDom.host.prepend( tablePart ); | |
} | |
else { | |
itemDom.host.append( tablePart ); | |
} | |
if ( itemDom.floating ) { | |
itemDom.floating.remove(); | |
itemDom.floating = null; | |
this._stickyPosition(itemDom.host, '+'); | |
} | |
if ( itemDom.floatingParent ) { | |
itemDom.floatingParent.remove(); | |
} | |
$($(itemDom.host.parent()).parent()).scrollLeft(scrollBody.scrollLeft()) | |
} | |
else if ( mode === 'in' ) { | |
// Remove the header from the read header and insert into a fixed | |
// positioned floating table clone | |
this._clone( item, forceChange ); | |
// Get useful position values | |
var scrollOffset = scrollBody.offset(); | |
var windowTop = $(document).scrollTop(); | |
var windowHeight = $(window).height(); | |
var windowBottom = windowTop + windowHeight; | |
var bodyTop = scrollEnabled ? scrollOffset.top : position.tbodyTop; | |
var bodyBottom = scrollEnabled ? scrollOffset.top + scrollBody.outerHeight() : position.tfootTop | |
// Calculate the amount that the footer or header needs to be shuffled | |
var shuffle = item === 'footer' ? | |
// footer and top of body isn't on screen | |
bodyTop > windowBottom ? | |
// Yes - push the footer below | |
position.tfootHeight : | |
// No - bottom set to the gap between the top of the body and the bottom of the window | |
bodyTop + position.tfootHeight - windowBottom : | |
// Otherwise must be a header so get the difference from the bottom of the | |
// desired floating header and the bottom of the table body | |
windowTop + this.c.headerOffset + position.theadHeight - bodyBottom | |
// Set the top or bottom based off of the offset and the shuffle value | |
var prop = item === 'header' ? 'top' : 'bottom'; | |
var val = this.c[item+'Offset'] - (shuffle > 0 ? shuffle : 0); | |
itemDom.floating.addClass( 'fixedHeader-floating' ); | |
itemDom.floatingParent | |
.css(prop, val) | |
.css( { | |
'left': position.left, | |
'height': item === 'header' ? position.theadHeight : position.tfootHeight, | |
'z-index': 2 | |
}) | |
.append(itemDom.floating); | |
importantWidth(position.width); | |
if ( item === 'footer' ) { | |
itemDom.floating.css( 'top', '' ); | |
} | |
} | |
else if ( mode === 'below' ) { // only used for the header | |
// Fix the position of the floating header at base of the table body | |
this._clone( item, forceChange ); | |
itemDom.floating.addClass( 'fixedHeader-locked' ); | |
itemDom.floatingParent.css({ | |
position: 'absolute', | |
top: position.tfootTop - position.theadHeight, | |
left: position.left+'px' | |
}); | |
importantWidth(position.width); | |
} | |
else if ( mode === 'above' ) { // only used for the footer | |
// Fix the position of the floating footer at top of the table body | |
this._clone( item, forceChange ); | |
itemDom.floating.addClass( 'fixedHeader-locked' ); | |
itemDom.floatingParent.css({ | |
position: 'absolute', | |
top: position.tbodyTop, | |
left: position.left+'px' | |
}); | |
importantWidth(position.width); | |
} | |
// Restore focus if it was lost | |
if ( focus && focus !== document.activeElement ) { | |
setTimeout( function () { | |
focus.focus(); | |
}, 10 ); | |
} | |
this.s.scrollLeft.header = -1; | |
this.s.scrollLeft.footer = -1; | |
this.s[item+'Mode'] = mode; | |
}, | |
/** | |
* Cache the positional information that is required for the mode | |
* calculations that FixedHeader performs. | |
* | |
* @private | |
*/ | |
_positions: function () | |
{ | |
var dt = this.s.dt; | |
var table = dt.table(); | |
var position = this.s.position; | |
var dom = this.dom; | |
var tableNode = $(table.node()); | |
var scrollEnabled = this._scrollEnabled(); | |
// Need to use the header and footer that are in the main table, | |
// regardless of if they are clones, since they hold the positions we | |
// want to measure from | |
var thead = $(dt.table().header()); | |
var tfoot = $(dt.table().footer()); | |
var tbody = dom.tbody; | |
var scrollBody = tableNode.parent(); | |
position.visible = tableNode.is(':visible'); | |
position.width = tableNode.outerWidth(); | |
position.left = tableNode.offset().left; | |
position.theadTop = thead.offset().top; | |
position.tbodyTop = scrollEnabled ? scrollBody.offset().top : tbody.offset().top; | |
position.tbodyHeight = scrollEnabled ? scrollBody.outerHeight() : tbody.outerHeight(); | |
position.theadHeight = thead.outerHeight(); | |
position.theadBottom = position.theadTop + position.theadHeight; | |
if ( tfoot.length ) { | |
position.tfootTop = position.tbodyTop + position.tbodyHeight; //tfoot.offset().top; | |
position.tfootBottom = position.tfootTop + tfoot.outerHeight(); | |
position.tfootHeight = tfoot.outerHeight(); | |
} | |
else { | |
position.tfootTop = position.tbodyTop + tbody.outerHeight(); | |
position.tfootBottom = position.tfootTop; | |
position.tfootHeight = position.tfootTop; | |
} | |
}, | |
/** | |
* Mode calculation - determine what mode the fixed items should be placed | |
* into. | |
* | |
* @param {boolean} forceChange Force a redraw of the mode, even if already | |
* in that mode. | |
* @private | |
*/ | |
_scroll: function ( forceChange ) | |
{ | |
// ScrollBody details | |
var scrollEnabled = this._scrollEnabled(); | |
var scrollBody = $(this.s.dt.table().node()).parent(); | |
var scrollOffset = scrollBody.offset(); | |
var scrollHeight = scrollBody.outerHeight(); | |
// Window details | |
var windowLeft = $(document).scrollLeft(); | |
var windowTop = $(document).scrollTop(); | |
var windowHeight = $(window).height(); | |
var windowBottom = windowHeight + windowTop | |
var position = this.s.position; | |
var headerMode, footerMode; | |
// Body Details | |
var bodyTop = (scrollEnabled ? scrollOffset.top : position.tbodyTop); | |
var bodyLeft = (scrollEnabled ? scrollOffset.left : position.left); | |
var bodyBottom = (scrollEnabled ? scrollOffset.top + scrollHeight : position.tfootTop); | |
var bodyWidth = (scrollEnabled ? scrollBody.outerWidth() : position.tbodyWidth); | |
var windowBottom = windowTop + windowHeight; | |
if ( this.c.header ) { | |
if ( ! this.s.enable ) { | |
headerMode = 'in-place'; | |
} | |
// The header is in it's normal place if the body top is lower than | |
// the scroll of the window plus the headerOffset and the height of the header | |
else if ( ! position.visible || windowTop + this.c.headerOffset + position.theadHeight <= bodyTop) { | |
headerMode = 'in-place'; | |
} | |
// The header should be floated if | |
else if ( | |
// The scrolling plus the header offset plus the height of the header is lower than the top of the body | |
windowTop + this.c.headerOffset + position.theadHeight > bodyTop && | |
// And the scrolling at the top plus the header offset is above the bottom of the body | |
windowTop + this.c.headerOffset < bodyBottom | |
) { | |
headerMode = 'in'; | |
var scrollBody = $($(this.s.dt.table().node()).parent()); | |
// Further to the above, If the scrolling plus the header offset plus the header height is lower | |
// than the bottom of the table a shuffle is required so have to force the calculation | |
if(windowTop + this.c.headerOffset + position.theadHeight > bodyBottom || this.dom.header.floatingParent === undefined){ | |
forceChange = true; | |
} | |
else { | |
this.dom.header.floatingParent | |
.css({ | |
'top': this.c.headerOffset, | |
'position': 'fixed' | |
}) | |
.append(this.dom.header.floating); | |
} | |
} | |
// Anything else and the view is below the table | |
else { | |
headerMode = 'below'; | |
} | |
if ( forceChange || headerMode !== this.s.headerMode ) { | |
this._modeChange( headerMode, 'header', forceChange ); | |
} | |
this._horizontal( 'header', windowLeft ); | |
} | |
var header = { | |
offset: {top: 0, left: 0}, | |
height: 0 | |
} | |
var footer = { | |
offset: {top: 0, left: 0}, | |
height: 0 | |
} | |
if ( this.c.footer && this.dom.tfoot.length ) { | |
if ( ! this.s.enable ) { | |
footerMode = 'in-place'; | |
} | |
else if ( ! position.visible || position.tfootBottom + this.c.footerOffset <= windowBottom ) { | |
footerMode = 'in-place'; | |
} | |
else if ( | |
bodyBottom + position.tfootHeight + this.c.footerOffset > windowBottom && | |
bodyTop + this.c.footerOffset < windowBottom | |
) { | |
footerMode = 'in'; | |
forceChange = true; | |
} | |
else { | |
footerMode = 'above'; | |
} | |
if ( forceChange || footerMode !== this.s.footerMode ) { | |
this._modeChange( footerMode, 'footer', forceChange ); | |
} | |
this._horizontal( 'footer', windowLeft ); | |
var getOffsetHeight = (el) => { | |
return { | |
offset: el.offset(), | |
height: el.outerHeight() | |
} | |
} | |
header = this.dom.header.floating ? getOffsetHeight(this.dom.header.floating) : getOffsetHeight(this.dom.thead); | |
footer = this.dom.footer.floating ? getOffsetHeight(this.dom.footer.floating) : getOffsetHeight(this.dom.tfoot); | |
// If scrolling is enabled and the footer is off the screen | |
if (scrollEnabled && footer.offset.top > windowTop){// && footer.offset.top >= windowBottom) { | |
// Calculate the gap between the top of the scrollBody and the top of the window | |
var overlap = windowTop - scrollOffset.top; | |
// The new height is the bottom of the window | |
var newHeight = windowBottom + | |
// If the gap between the top of the scrollbody and the window is more than | |
// the height of the header then the top of the table is still visible so add that gap | |
// Doing this has effectively calculated the height from the top of the table to the bottom of the current page | |
(overlap > -header.height ? overlap : 0) - | |
// Take from that | |
( | |
// The top of the header plus | |
header.offset.top + | |
// The header height if the standard header is present | |
(overlap < -header.height ? header.height : 0) + | |
// And the height of the footer | |
footer.height | |
) | |
// Don't want a negative height | |
if (newHeight < 0) { | |
newHeight = 0; | |
} | |
// At the end of the above calculation the space between the header (top of the page if floating) | |
// and the point just above the footer should be the new value for the height of the table. | |
scrollBody.outerHeight(newHeight); | |
// Need some rounding here as sometimes very small decimal places are encountered | |
// If the actual height is bigger or equal to the height we just applied then the footer is "Floating" | |
if(Math.round(scrollBody.outerHeight()) >= Math.round(newHeight)) { | |
$(this.dom.tfoot.parent()).addClass("fixedHeader-floating"); | |
} | |
// Otherwise max-width has kicked in so it is not floating | |
else { | |
$(this.dom.tfoot.parent()).removeClass("fixedHeader-floating"); | |
} | |
} | |
} | |
if(this.dom.header.floating){ | |
this.dom.header.floatingParent.css('left', bodyLeft-windowLeft); | |
} | |
if(this.dom.footer.floating){ | |
this.dom.footer.floatingParent.css('left', bodyLeft-windowLeft); | |
} | |
// If fixed columns is being used on this table then the blockers need to be copied across | |
// Cloning these is cleaner than creating as our own as it will keep consistency with fixedColumns automatically | |
// ASSUMING that the class remains the same | |
if (this.s.dt.settings()[0]._fixedColumns !== undefined) { | |
var adjustBlocker = (side, end, el) => { | |
if (el === undefined) { | |
let blocker = $('div.dtfc-'+side+'-'+end+'-blocker'); | |
el = blocker.length === 0 ? | |
null : | |
blocker.clone().appendTo('body').css('z-index', 1); | |
} | |
if(el !== null) { | |
el.css({ | |
top: end === 'top' ? header.offset.top : footer.offset.top, | |
left: side === 'right' ? bodyLeft + bodyWidth - el.width() : bodyLeft | |
}); | |
} | |
return el; | |
} | |
// Adjust all blockers | |
this.dom.header.rightBlocker = adjustBlocker('right', 'top', this.dom.header.rightBlocker); | |
this.dom.header.leftBlocker = adjustBlocker('left', 'top', this.dom.header.leftBlocker); | |
this.dom.footer.rightBlocker = adjustBlocker('right', 'bottom', this.dom.footer.rightBlocker); | |
this.dom.footer.leftBlocker = adjustBlocker('left', 'bottom', this.dom.footer.leftBlocker); | |
} | |
}, | |
/** | |
* Function to check if scrolling is enabled on the table or not | |
* @returns Boolean value indicating if scrolling on the table is enabled or not | |
*/ | |
_scrollEnabled: function() { | |
var oScroll = this.s.dt.settings()[0].oScroll; | |
if(oScroll.sY !== "" || oScroll.sX !== "") { | |
return true; | |
} | |
return false | |
} | |
} ); | |
/** | |
* Version | |
* @type {String} | |
* @static | |
*/ | |
FixedHeader.version = "3.2.1"; | |
/** | |
* Defaults | |
* @type {Object} | |
* @static | |
*/ | |
FixedHeader.defaults = { | |
header: true, | |
footer: false, | |
headerOffset: 0, | |
footerOffset: 0 | |
}; | |
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * | |
* DataTables interfaces | |
*/ | |
// Attach for constructor access | |
$.fn.dataTable.FixedHeader = FixedHeader; | |
$.fn.DataTable.FixedHeader = FixedHeader; | |
// DataTables creation - check if the FixedHeader option has been defined on the | |
// table and if so, initialise | |
$(document).on( 'init.dt.dtfh', function (e, settings, json) { | |
if ( e.namespace !== 'dt' ) { | |
return; | |
} | |
var init = settings.oInit.fixedHeader; | |
var defaults = DataTable.defaults.fixedHeader; | |
if ( (init || defaults) && ! settings._fixedHeader ) { | |
var opts = $.extend( {}, defaults, init ); | |
if ( init !== false ) { | |
new FixedHeader( settings, opts ); | |
} | |
} | |
} ); | |
// DataTables API methods | |
DataTable.Api.register( 'fixedHeader()', function () {} ); | |
DataTable.Api.register( 'fixedHeader.adjust()', function () { | |
return this.iterator( 'table', function ( ctx ) { | |
var fh = ctx._fixedHeader; | |
if ( fh ) { | |
fh.update(); | |
} | |
} ); | |
} ); | |
DataTable.Api.register( 'fixedHeader.enable()', function ( flag ) { | |
return this.iterator( 'table', function ( ctx ) { | |
var fh = ctx._fixedHeader; | |
flag = ( flag !== undefined ? flag : true ); | |
if ( fh && flag !== fh.enabled() ) { | |
fh.enable( flag ); | |
} | |
} ); | |
} ); | |
DataTable.Api.register( 'fixedHeader.enabled()', function () { | |
if ( this.context.length ) { | |
var fh = this.context[0]._fixedHeader; | |
if ( fh ) { | |
return fh.enabled(); | |
} | |
} | |
return false; | |
} ); | |
DataTable.Api.register( 'fixedHeader.disable()', function ( ) { | |
return this.iterator( 'table', function ( ctx ) { | |
var fh = ctx._fixedHeader; | |
if ( fh && fh.enabled() ) { | |
fh.enable( false ); | |
} | |
} ); | |
} ); | |
$.each( ['header', 'footer'], function ( i, el ) { | |
DataTable.Api.register( 'fixedHeader.'+el+'Offset()', function ( offset ) { | |
var ctx = this.context; | |
if ( offset === undefined ) { | |
return ctx.length && ctx[0]._fixedHeader ? | |
ctx[0]._fixedHeader[el +'Offset']() : | |
undefined; | |
} | |
return this.iterator( 'table', function ( ctx ) { | |
var fh = ctx._fixedHeader; | |
if ( fh ) { | |
fh[ el +'Offset' ]( offset ); | |
} | |
} ); | |
} ); | |
} ); | |
return FixedHeader; | |
})); | |