500 lines
12 KiB
JavaScript
500 lines
12 KiB
JavaScript
|
/*! FixedHeader 3.0.0
|
||
|
|
* ©2009-2015 SpryMedia Ltd - datatables.net/license
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @summary FixedHeader
|
||
|
|
* @description Fix a table's header or footer, so it is always visible while
|
||
|
|
* scrolling
|
||
|
|
* @version 3.0.0
|
||
|
|
* @file dataTables.fixedHeader.js
|
||
|
|
* @author SpryMedia Ltd (www.sprymedia.co.uk)
|
||
|
|
* @contact www.sprymedia.co.uk/contact
|
||
|
|
* @copyright Copyright 2009-2015 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(window, document, undefined) {
|
||
|
|
|
||
|
|
|
||
|
|
var factory = function( $, DataTable ) {
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
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,
|
||
|
|
namespace: '.dtfc'+(_instCounter++)
|
||
|
|
};
|
||
|
|
|
||
|
|
this.dom = {
|
||
|
|
floatingHeader: null,
|
||
|
|
thead: $(dt.table().header()),
|
||
|
|
tbody: $(dt.table().body()),
|
||
|
|
tfoot: $(dt.table().footer()),
|
||
|
|
header: {
|
||
|
|
host: null,
|
||
|
|
floating: null,
|
||
|
|
placeholder: null
|
||
|
|
},
|
||
|
|
footer: {
|
||
|
|
host: null,
|
||
|
|
floating: null,
|
||
|
|
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
|
||
|
|
*/
|
||
|
|
FixedHeader.prototype = {
|
||
|
|
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||
|
|
* API methods
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Recalculate the position of the fixed elements and force them into place
|
||
|
|
*/
|
||
|
|
update: function () {
|
||
|
|
this._positions();
|
||
|
|
this._scroll( 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, function () {
|
||
|
|
that.s.position.windowHeight = $(window).height();
|
||
|
|
that._positions();
|
||
|
|
that._scroll( true );
|
||
|
|
} );
|
||
|
|
|
||
|
|
dt
|
||
|
|
.on( 'column-reorder.dt.dtfc column-visibility.dt.dtfc', function () {
|
||
|
|
that._positions();
|
||
|
|
that._scroll( true );
|
||
|
|
} )
|
||
|
|
.on( 'draw.dtfc', function () {
|
||
|
|
that._positions();
|
||
|
|
that._scroll();
|
||
|
|
} );
|
||
|
|
|
||
|
|
dt.on( 'destroy.dtfc', function () {
|
||
|
|
dt.off( '.dtfc' );
|
||
|
|
$(window).off( this.s.namespace );
|
||
|
|
} );
|
||
|
|
|
||
|
|
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 ( ! force && itemDom.floating ) {
|
||
|
|
// existing floating element - reuse it
|
||
|
|
itemDom.floating.removeClass( 'fixedHeader-floating fixedHeader-locked' );
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if ( itemDom.floating ) {
|
||
|
|
itemDom.placeholder.remove();
|
||
|
|
itemDom.floating.children().detach();
|
||
|
|
itemDom.floating.remove();
|
||
|
|
}
|
||
|
|
|
||
|
|
itemDom.floating = $( dt.table().node().cloneNode( false ) )
|
||
|
|
.removeAttr( 'id' )
|
||
|
|
.append( itemElement )
|
||
|
|
.appendTo( 'body' );
|
||
|
|
|
||
|
|
// Insert a fake thead/tfoot into the DataTable to stop it jumping around
|
||
|
|
itemDom.placeholder = itemElement.clone( false );
|
||
|
|
itemDom.host.append( itemDom.placeholder );
|
||
|
|
|
||
|
|
// Footer needs sizes cloned across
|
||
|
|
if ( item === 'footer' ) {
|
||
|
|
this._footerMatch( itemDom.placeholder, itemDom.floating );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 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.
|
||
|
|
*
|
||
|
|
* @param {jQuery} from Copy widths from
|
||
|
|
* @param {jQuery} to Copy widths to
|
||
|
|
* @private
|
||
|
|
*/
|
||
|
|
_footerMatch: function ( from, to ) {
|
||
|
|
var type = function ( name ) {
|
||
|
|
var toWidths = $(name, from)
|
||
|
|
.map( function () {
|
||
|
|
return $(this).width();
|
||
|
|
} ).toArray();
|
||
|
|
|
||
|
|
$(name, to).each( function ( i ) {
|
||
|
|
$(this).width( toWidths[i] );
|
||
|
|
} );
|
||
|
|
};
|
||
|
|
|
||
|
|
type( 'th' );
|
||
|
|
type( 'td' );
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 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.
|
||
|
|
*
|
||
|
|
* @private
|
||
|
|
*/
|
||
|
|
_footerUnsize: function () {
|
||
|
|
var footer = this.dom.footer.floating;
|
||
|
|
|
||
|
|
if ( footer ) {
|
||
|
|
$('th, td', footer).css( 'width', '' );
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 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;
|
||
|
|
|
||
|
|
if ( mode === 'in-place' ) {
|
||
|
|
// Insert the header back into the table's real header
|
||
|
|
if ( itemDom.placeholder ) {
|
||
|
|
itemDom.placeholder.remove();
|
||
|
|
itemDom.placeholder = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
itemDom.host.append( item === 'header' ?
|
||
|
|
this.dom.thead :
|
||
|
|
this.dom.tfoot
|
||
|
|
);
|
||
|
|
|
||
|
|
if ( itemDom.floating ) {
|
||
|
|
itemDom.floating.remove();
|
||
|
|
itemDom.floating = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( item === 'footer' ) {
|
||
|
|
this._footerUnsize();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if ( mode === 'in' ) {
|
||
|
|
// Remove the header from the read header and insert into a fixed
|
||
|
|
// positioned floating table clone
|
||
|
|
this._clone( item, forceChange );
|
||
|
|
|
||
|
|
itemDom.floating
|
||
|
|
.addClass( 'fixedHeader-floating' )
|
||
|
|
.css( item === 'header' ? 'top' : 'bottom', this.c[item+'Offset'] )
|
||
|
|
.css( 'left', position.left+'px' )
|
||
|
|
.css( 'width', position.width+'px' );
|
||
|
|
|
||
|
|
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' )
|
||
|
|
.css( 'top', position.tfootTop - position.theadHeight )
|
||
|
|
.css( 'left', position.left+'px' )
|
||
|
|
.css( 'width', position.width+'px' );
|
||
|
|
}
|
||
|
|
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' )
|
||
|
|
.css( 'top', position.tbodyTop )
|
||
|
|
.css( 'left', position.left+'px' )
|
||
|
|
.css( 'width', position.width+'px' );
|
||
|
|
}
|
||
|
|
|
||
|
|
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());
|
||
|
|
|
||
|
|
// 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 = tableNode.children('thead');
|
||
|
|
var tfoot = tableNode.children('tfoot');
|
||
|
|
var tbody = dom.tbody;
|
||
|
|
|
||
|
|
position.visible = tableNode.is(':visible');
|
||
|
|
position.width = tableNode.outerWidth();
|
||
|
|
position.left = tableNode.offset().left;
|
||
|
|
position.theadTop = thead.offset().top;
|
||
|
|
position.tbodyTop = tbody.offset().top;
|
||
|
|
position.theadHeight = position.tbodyTop - position.theadTop;
|
||
|
|
|
||
|
|
if ( tfoot.length ) {
|
||
|
|
position.tfootTop = tfoot.offset().top;
|
||
|
|
position.tfootBottom = position.tfootTop + tfoot.outerHeight();
|
||
|
|
position.tfootHeight = position.tfootBottom - position.tfootTop;
|
||
|
|
}
|
||
|
|
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 )
|
||
|
|
{
|
||
|
|
var windowTop = $(document).scrollTop();
|
||
|
|
var position = this.s.position;
|
||
|
|
var headerMode, footerMode;
|
||
|
|
|
||
|
|
if ( this.c.header ) {
|
||
|
|
if ( ! position.visible || windowTop <= position.theadTop - this.c.headerOffset ) {
|
||
|
|
headerMode = 'in-place';
|
||
|
|
}
|
||
|
|
else if ( windowTop <= position.tfootTop - position.theadHeight - this.c.headerOffset ) {
|
||
|
|
headerMode = 'in';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
headerMode = 'below';
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( forceChange || headerMode !== this.s.headerMode ) {
|
||
|
|
this._modeChange( headerMode, 'header', forceChange );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( this.c.footer && this.dom.tfoot.length ) {
|
||
|
|
if ( ! position.visible || windowTop + position.windowHeight >= position.tfootBottom + this.c.footerOffset ) {
|
||
|
|
footerMode = 'in-place';
|
||
|
|
}
|
||
|
|
else if ( position.windowHeight + windowTop > position.tbodyTop + position.tfootHeight + this.c.footerOffset ) {
|
||
|
|
footerMode = 'in';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
footerMode = 'above';
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( forceChange || footerMode !== this.s.footerMode ) {
|
||
|
|
this._modeChange( footerMode, 'footer', forceChange );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Version
|
||
|
|
* @type {String}
|
||
|
|
* @static
|
||
|
|
*/
|
||
|
|
FixedHeader.version = "3.0.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.dtb', function (e, settings, json) {
|
||
|
|
if ( e.namespace !== 'dt' ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var opts = settings.oInit.fixedHeader || DataTable.defaults.fixedHeader;
|
||
|
|
|
||
|
|
if ( opts && ! settings._buttons ) {
|
||
|
|
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();
|
||
|
|
}
|
||
|
|
} );
|
||
|
|
} );
|
||
|
|
|
||
|
|
|
||
|
|
return FixedHeader;
|
||
|
|
}; // /factory
|
||
|
|
|
||
|
|
|
||
|
|
// Define as an AMD module if possible
|
||
|
|
if ( typeof define === 'function' && define.amd ) {
|
||
|
|
define( ['jquery', 'datatables'], factory );
|
||
|
|
}
|
||
|
|
else if ( typeof exports === 'object' ) {
|
||
|
|
// Node/CommonJS
|
||
|
|
factory( require('jquery'), require('datatables') );
|
||
|
|
}
|
||
|
|
else if ( jQuery && !jQuery.fn.dataTable.FixedHeader ) {
|
||
|
|
// Otherwise simply initialise as normal, stopping multiple evaluation
|
||
|
|
factory( jQuery, jQuery.fn.dataTable );
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
})(window, document);
|