From 0225bdb772d1334cc1aa7ab0fc3678df0864df6b Mon Sep 17 00:00:00 2001 From: AlisaLinUwU Date: Sun, 26 Jan 2025 10:42:28 +0500 Subject: Initialize --- .../js/dataTables.fixedHeader.js | 1041 ++++++++++++++++++++ 1 file changed, 1041 insertions(+) create mode 100644 src/main/resources/static/plugins/datatables-fixedheader/js/dataTables.fixedHeader.js (limited to 'src/main/resources/static/plugins/datatables-fixedheader/js/dataTables.fixedHeader.js') diff --git a/src/main/resources/static/plugins/datatables-fixedheader/js/dataTables.fixedHeader.js b/src/main/resources/static/plugins/datatables-fixedheader/js/dataTables.fixedHeader.js new file mode 100644 index 0000000..b038bfc --- /dev/null +++ b/src/main/resources/static/plugins/datatables-fixedheader/js/dataTables.fixedHeader.js @@ -0,0 +1,1041 @@ +/*! 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 ) { +'use strict'; +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: $('
'), + placeholder: null + }, + footer: { + host: null, + floating: null, + 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} 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; +})); -- cgit v1.2.3