/*! FixedHeader 3.4.0 * © SpryMedia Ltd - datatables.net/license */ (function( factory ){ if ( typeof define === 'function' && define.amd ) { // AMD define( ['jquery', 'datatables.net'], function ( $ ) { return factory( $, window, document ); } ); } else if ( typeof exports === 'object' ) { // CommonJS var jq = require('jquery'); var cjsRequires = function (root, $) { if ( ! $.fn.dataTable ) { require('datatables.net')(root, $); } }; if (typeof window === 'undefined') { module.exports = function (root, $) { if ( ! root ) { // CommonJS environments without a window global must pass a // root. This will give an error otherwise root = window; } if ( ! $ ) { $ = jq( root ); } cjsRequires( root, $ ); return factory( $, root, root.document ); }; } else { cjsRequires( window, jq ); module.exports = factory( jq, window, window.document ); } } else { // Browser factory( jQuery, window, document ); } }(function( $, window, document, undefined ) { 'use strict'; var DataTable = $.fn.dataTable; /** * @summary FixedHeader * @description Fix a table's header or footer, so it is always visible while * scrolling * @version 3.4.0 * @author SpryMedia Ltd (www.sprymedia.co.uk) * @contact www.sprymedia.co.uk * @copyright 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 */ 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, autoDisable: false }; 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 () { var dom = this.dom; this.s.dt.off('.dtfc'); $(window).off(this.s.namespace); // Remove clones of FC blockers if (dom.header.rightBlocker) { dom.header.rightBlocker.remove(); } if (dom.header.leftBlocker) { dom.header.leftBlocker.remove(); } if (dom.footer.rightBlocker) { dom.footer.rightBlocker.remove(); } if (dom.footer.leftBlocker) { dom.footer.leftBlocker.remove(); } if (this.c.header) { this._modeChange('in-place', 'header', true); } if (this.c.footer && 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, type) { this.s.enable = enable; this.s.enableType = type; 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(); // Update should only do something if enabled by the dev. if (!this.s.enable && !this.s.autoDisable) { return; } if ($(table).is(':visible')) { this.s.autoDisable = false; this.enable(true, false); } else { this.s.autoDisable = true; 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 that = this; 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 = function () { var scrollLeft = scrollBody.scrollLeft(); that.s.scrollLeft = { footer: scrollLeft, header: scrollLeft }; itemDom.floatingParent.scrollLeft(that.s.scrollLeft.header); }; scrollLeftUpdate(); scrollBody.off('scroll.dtfh').on('scroll.dtfh', 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: function (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) { if (this.s.dt.settings()[0].bDestroying) { return; } // 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 + position.theadHeight < 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 = function (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 = function (side, end, el) { if (el === undefined) { var blocker = $('div.dtfc-' + side + '-' + end + '-blocker'); el = blocker.length === 0 ? null : blocker.clone().css('z-index', 1); } if (el !== null) { if (headerMode === 'in' || headerMode === 'below') { el.appendTo('body').css({ top: end === 'top' ? header.offset.top : footer.offset.top, left: side === 'right' ? bodyLeft + bodyWidth - el.width() : bodyLeft }); } else { el.detach(); } } 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.4.0'; /** * 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 DataTable; }));