123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737 |
- (function( factory ){
- if ( typeof define === 'function' && define.amd ) {
-
- define( ['jquery', 'datatables.net'], function ( $ ) {
- return factory( $, window, document );
- } );
- }
- else if ( typeof exports === 'object' ) {
-
- module.exports = function (root, $) {
- if ( ! root ) {
- root = window;
- }
- if ( ! $ || ! $.fn.dataTable ) {
- $ = require('datatables.net')(root, $).$;
- }
- return factory( $, root, root.document );
- };
- }
- else {
-
- factory( jQuery, window, document );
- }
- }(function( $, window, document, undefined ) {
- 'use strict';
- var DataTable = $.fn.dataTable;
- var _instCounter = 0;
- var FixedHeader = function ( dt, config ) {
-
- if ( ! (this instanceof FixedHeader) ) {
- throw "FixedHeader must be initialised with the 'new' keyword.";
- }
-
- 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,
- 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();
- };
- $.extend( FixedHeader.prototype, {
-
-
- 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: function ( enable, update )
- {
- this.s.enable = enable;
- if ( update || update === undefined ) {
- this._positions();
- this._scroll( true );
- }
- },
-
- enabled: function ()
- {
- return this.s.enable;
- },
-
-
- headerOffset: function ( offset )
- {
- if ( offset !== undefined ) {
- this.c.headerOffset = offset;
- this.update();
- }
- return this.c.headerOffset;
- },
-
-
- footerOffset: function ( offset )
- {
- if ( offset !== undefined ) {
- this.c.footerOffset = offset;
- this.update();
- }
- return this.c.footerOffset;
- },
-
-
- update: function ()
- {
- var table = this.s.dt.table().node();
- if ( $(table).is(':visible') ) {
- this.enable( true, false );
- }
- else {
- this.enable( false, false );
- }
- this._positions();
- this._scroll( true );
- },
-
-
-
- _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 draw.dt.dtfc column-sizing.dt.dtfc responsive-display.dt.dtfc', function () {
- that.update();
- } );
- dt.on( 'destroy.dtfc', function () {
- that.destroy();
- } );
- this._positions();
- this._scroll();
- },
-
-
- _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 ) {
-
- itemDom.floating.removeClass( 'fixedHeader-floating fixedHeader-locked' );
- }
- else {
- if ( itemDom.floating ) {
- itemDom.placeholder.remove();
- this._unsize( item );
- itemDom.floating.children().detach();
- itemDom.floating.remove();
- }
- itemDom.floating = $( dt.table().node().cloneNode( false ) )
- .css( 'table-layout', 'fixed' )
- .attr( 'aria-hidden', 'true' )
- .removeAttr( 'id' )
- .append( itemElement )
- .appendTo( 'body' );
-
- itemDom.placeholder = itemElement.clone( false );
- itemDom.placeholder
- .find( '*[id]' )
- .removeAttr( 'id' );
- itemDom.host.prepend( itemDom.placeholder );
-
- this._matchWidths( itemDom.placeholder, itemDom.floating );
- }
- },
-
- _matchWidths: function ( from, to ) {
- var get = function ( name ) {
- return $(name, from)
- .map( function () {
- return $(this).width();
- } ).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 );
- },
-
- _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', '' );
- }
- },
-
- _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 ) {
- itemDom.floating.css( 'left', position.left - scrollLeft );
- lastScrollLeft[ item ] = scrollLeft;
- }
- },
-
- _modeChange: function ( mode, item, forceChange )
- {
- var dt = this.s.dt;
- var itemDom = this.dom[ item ];
- var position = this.s.position;
-
- var importantWidth = function (w) {
- itemDom.floating.attr('style', function(i,s) {
- return (s || '') + 'width: '+w+'px !important;';
- });
- };
-
-
- var tablePart = this.dom[ item==='footer' ? 'tfoot' : 'thead' ];
- var focus = $.contains( tablePart[0], document.activeElement ) ?
- document.activeElement :
- null;
-
- if ( focus ) {
- focus.blur();
- }
- if ( mode === 'in-place' ) {
-
- 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;
- }
- }
- else if ( mode === 'in' ) {
-
-
- this._clone( item, forceChange );
- itemDom.floating
- .addClass( 'fixedHeader-floating' )
- .css( item === 'header' ? 'top' : 'bottom', this.c[item+'Offset'] )
- .css( 'left', position.left+'px' );
- importantWidth(position.width);
- if ( item === 'footer' ) {
- itemDom.floating.css( 'top', '' );
- }
- }
- else if ( mode === 'below' ) {
-
- this._clone( item, forceChange );
- itemDom.floating
- .addClass( 'fixedHeader-locked' )
- .css( 'top', position.tfootTop - position.theadHeight )
- .css( 'left', position.left+'px' );
- importantWidth(position.width);
- }
- else if ( mode === 'above' ) {
-
- this._clone( item, forceChange );
- itemDom.floating
- .addClass( 'fixedHeader-locked' )
- .css( 'top', position.tbodyTop )
- .css( 'left', position.left+'px' );
- importantWidth(position.width);
- }
-
- 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;
- },
-
- _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 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.tbodyHeight = tbody.outerHeight();
- 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;
- }
- },
-
- _scroll: function ( forceChange )
- {
- var windowTop = $(document).scrollTop();
- var windowLeft = $(document).scrollLeft();
- var position = this.s.position;
- var headerMode, footerMode;
- if ( this.c.header ) {
- if ( ! this.s.enable ) {
- headerMode = 'in-place';
- }
- else 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 );
- }
- this._horizontal( 'header', windowLeft );
- }
- if ( this.c.footer && this.dom.tfoot.length ) {
- if ( ! this.s.enable ) {
- footerMode = 'in-place';
- }
- else 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 );
- }
- this._horizontal( 'footer', windowLeft );
- }
- }
- } );
- FixedHeader.version = "3.1.7";
- FixedHeader.defaults = {
- header: true,
- footer: false,
- headerOffset: 0,
- footerOffset: 0
- };
- $.fn.dataTable.FixedHeader = FixedHeader;
- $.fn.DataTable.FixedHeader = FixedHeader;
- $(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 );
- }
- }
- } );
- 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.content[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;
- }));
|