You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1042 line
28KB

  1. /*! FixedHeader 3.2.1
  2. * ©2009-2021 SpryMedia Ltd - datatables.net/license
  3. */
  4. /**
  5. * @summary FixedHeader
  6. * @description Fix a table's header or footer, so it is always visible while
  7. * scrolling
  8. * @version 3.2.1
  9. * @file dataTables.fixedHeader.js
  10. * @author SpryMedia Ltd (www.sprymedia.co.uk)
  11. * @contact www.sprymedia.co.uk/contact
  12. * @copyright Copyright 2009-2021 SpryMedia Ltd.
  13. *
  14. * This source file is free software, available under the following license:
  15. * MIT license - http://datatables.net/license/mit
  16. *
  17. * This source file is distributed in the hope that it will be useful, but
  18. * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
  19. * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
  20. *
  21. * For details please refer to: http://www.datatables.net
  22. */
  23. (function( factory ){
  24. if ( typeof define === 'function' && define.amd ) {
  25. // AMD
  26. define( ['jquery', 'datatables.net'], function ( $ ) {
  27. return factory( $, window, document );
  28. } );
  29. }
  30. else if ( typeof exports === 'object' ) {
  31. // CommonJS
  32. module.exports = function (root, $) {
  33. if ( ! root ) {
  34. root = window;
  35. }
  36. if ( ! $ || ! $.fn.dataTable ) {
  37. $ = require('datatables.net')(root, $).$;
  38. }
  39. return factory( $, root, root.document );
  40. };
  41. }
  42. else {
  43. // Browser
  44. factory( jQuery, window, document );
  45. }
  46. }(function( $, window, document, undefined ) {
  47. 'use strict';
  48. var DataTable = $.fn.dataTable;
  49. var _instCounter = 0;
  50. var FixedHeader = function ( dt, config ) {
  51. // Sanity check - you just know it will happen
  52. if ( ! (this instanceof FixedHeader) ) {
  53. throw "FixedHeader must be initialised with the 'new' keyword.";
  54. }
  55. // Allow a boolean true for defaults
  56. if ( config === true ) {
  57. config = {};
  58. }
  59. dt = new DataTable.Api( dt );
  60. this.c = $.extend( true, {}, FixedHeader.defaults, config );
  61. this.s = {
  62. dt: dt,
  63. position: {
  64. theadTop: 0,
  65. tbodyTop: 0,
  66. tfootTop: 0,
  67. tfootBottom: 0,
  68. width: 0,
  69. left: 0,
  70. tfootHeight: 0,
  71. theadHeight: 0,
  72. windowHeight: $(window).height(),
  73. visible: true
  74. },
  75. headerMode: null,
  76. footerMode: null,
  77. autoWidth: dt.settings()[0].oFeatures.bAutoWidth,
  78. namespace: '.dtfc'+(_instCounter++),
  79. scrollLeft: {
  80. header: -1,
  81. footer: -1
  82. },
  83. enable: true
  84. };
  85. this.dom = {
  86. floatingHeader: null,
  87. thead: $(dt.table().header()),
  88. tbody: $(dt.table().body()),
  89. tfoot: $(dt.table().footer()),
  90. header: {
  91. host: null,
  92. floating: null,
  93. floatingParent: $('<div class="dtfh-floatingparent">'),
  94. placeholder: null
  95. },
  96. footer: {
  97. host: null,
  98. floating: null,
  99. floatingParent: $('<div class="dtfh-floatingparent">'),
  100. placeholder: null
  101. }
  102. };
  103. this.dom.header.host = this.dom.thead.parent();
  104. this.dom.footer.host = this.dom.tfoot.parent();
  105. var dtSettings = dt.settings()[0];
  106. if ( dtSettings._fixedHeader ) {
  107. throw "FixedHeader already initialised on table "+dtSettings.nTable.id;
  108. }
  109. dtSettings._fixedHeader = this;
  110. this._constructor();
  111. };
  112. /*
  113. * Variable: FixedHeader
  114. * Purpose: Prototype for FixedHeader
  115. * Scope: global
  116. */
  117. $.extend( FixedHeader.prototype, {
  118. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  119. * API methods
  120. */
  121. /**
  122. * Kill off FH and any events
  123. */
  124. destroy: function () {
  125. this.s.dt.off( '.dtfc' );
  126. $(window).off( this.s.namespace );
  127. if ( this.c.header ) {
  128. this._modeChange( 'in-place', 'header', true );
  129. }
  130. if ( this.c.footer && this.dom.tfoot.length ) {
  131. this._modeChange( 'in-place', 'footer', true );
  132. }
  133. },
  134. /**
  135. * Enable / disable the fixed elements
  136. *
  137. * @param {boolean} enable `true` to enable, `false` to disable
  138. */
  139. enable: function ( enable, update )
  140. {
  141. this.s.enable = enable;
  142. if ( update || update === undefined ) {
  143. this._positions();
  144. this._scroll( true );
  145. }
  146. },
  147. /**
  148. * Get enabled status
  149. */
  150. enabled: function ()
  151. {
  152. return this.s.enable;
  153. },
  154. /**
  155. * Set header offset
  156. *
  157. * @param {int} new value for headerOffset
  158. */
  159. headerOffset: function ( offset )
  160. {
  161. if ( offset !== undefined ) {
  162. this.c.headerOffset = offset;
  163. this.update();
  164. }
  165. return this.c.headerOffset;
  166. },
  167. /**
  168. * Set footer offset
  169. *
  170. * @param {int} new value for footerOffset
  171. */
  172. footerOffset: function ( offset )
  173. {
  174. if ( offset !== undefined ) {
  175. this.c.footerOffset = offset;
  176. this.update();
  177. }
  178. return this.c.footerOffset;
  179. },
  180. /**
  181. * Recalculate the position of the fixed elements and force them into place
  182. */
  183. update: function (force)
  184. {
  185. var table = this.s.dt.table().node();
  186. if ( $(table).is(':visible') ) {
  187. this.enable( true, false );
  188. }
  189. else {
  190. this.enable( false, false );
  191. }
  192. // Don't update if header is not in the document atm (due to
  193. // async events)
  194. if ($(table).children('thead').length === 0) {
  195. return;
  196. }
  197. this._positions();
  198. this._scroll( force !== undefined ? force : true );
  199. },
  200. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  201. * Constructor
  202. */
  203. /**
  204. * FixedHeader constructor - adding the required event listeners and
  205. * simple initialisation
  206. *
  207. * @private
  208. */
  209. _constructor: function ()
  210. {
  211. var that = this;
  212. var dt = this.s.dt;
  213. $(window)
  214. .on( 'scroll'+this.s.namespace, function () {
  215. that._scroll();
  216. } )
  217. .on( 'resize'+this.s.namespace, DataTable.util.throttle( function () {
  218. that.s.position.windowHeight = $(window).height();
  219. that.update();
  220. }, 50 ) );
  221. var autoHeader = $('.fh-fixedHeader');
  222. if ( ! this.c.headerOffset && autoHeader.length ) {
  223. this.c.headerOffset = autoHeader.outerHeight();
  224. }
  225. var autoFooter = $('.fh-fixedFooter');
  226. if ( ! this.c.footerOffset && autoFooter.length ) {
  227. this.c.footerOffset = autoFooter.outerHeight();
  228. }
  229. dt
  230. .on( 'column-reorder.dt.dtfc column-visibility.dt.dtfc column-sizing.dt.dtfc responsive-display.dt.dtfc', function (e, ctx) {
  231. that.update();
  232. } )
  233. .on( 'draw.dt.dtfc', function (e, ctx) {
  234. // For updates from our own table, don't reclone, but for all others, do
  235. that.update(ctx === dt.settings()[0] ? false : true);
  236. } );
  237. dt.on( 'destroy.dtfc', function () {
  238. that.destroy();
  239. } );
  240. this._positions();
  241. this._scroll();
  242. },
  243. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  244. * Private methods
  245. */
  246. /**
  247. * Clone a fixed item to act as a place holder for the original element
  248. * which is moved into a clone of the table element, and moved around the
  249. * document to give the fixed effect.
  250. *
  251. * @param {string} item 'header' or 'footer'
  252. * @param {boolean} force Force the clone to happen, or allow automatic
  253. * decision (reuse existing if available)
  254. * @private
  255. */
  256. _clone: function ( item, force )
  257. {
  258. var dt = this.s.dt;
  259. var itemDom = this.dom[ item ];
  260. var itemElement = item === 'header' ?
  261. this.dom.thead :
  262. this.dom.tfoot;
  263. // If footer and scrolling is enabled then we don't clone
  264. // Instead the table's height is decreased accordingly - see `_scroll()`
  265. if (item === 'footer' && this._scrollEnabled()) {
  266. return;
  267. }
  268. if ( ! force && itemDom.floating ) {
  269. // existing floating element - reuse it
  270. itemDom.floating.removeClass( 'fixedHeader-floating fixedHeader-locked' );
  271. }
  272. else {
  273. if ( itemDom.floating ) {
  274. if(itemDom.placeholder !== null) {
  275. itemDom.placeholder.remove();
  276. }
  277. this._unsize( item );
  278. itemDom.floating.children().detach();
  279. itemDom.floating.remove();
  280. }
  281. var tableNode = $(dt.table().node());
  282. var scrollBody = $(tableNode.parent());
  283. var scrollEnabled = this._scrollEnabled();
  284. itemDom.floating = $( dt.table().node().cloneNode( false ) )
  285. .attr( 'aria-hidden', 'true' )
  286. .css({
  287. 'table-layout': 'fixed',
  288. top: 0,
  289. left: 0
  290. })
  291. .removeAttr( 'id' )
  292. .append( itemElement );
  293. itemDom.floatingParent
  294. .css({
  295. width: scrollBody.width(),
  296. overflow: 'hidden',
  297. height: 'fit-content',
  298. position: 'fixed',
  299. left: scrollEnabled ? tableNode.offset().left + scrollBody.scrollLeft() : 0
  300. })
  301. .css(
  302. item === 'header' ?
  303. {
  304. top: this.c.headerOffset,
  305. bottom: ''
  306. } :
  307. {
  308. top: '',
  309. bottom: this.c.footerOffset
  310. }
  311. )
  312. .addClass(item === 'footer' ? 'dtfh-floatingparentfoot' : 'dtfh-floatingparenthead')
  313. .append(itemDom.floating)
  314. .appendTo( 'body' );
  315. this._stickyPosition(itemDom.floating, '-');
  316. var scrollLeftUpdate = () => {
  317. var scrollLeft = scrollBody.scrollLeft()
  318. this.s.scrollLeft = {footer: scrollLeft, header: scrollLeft};
  319. itemDom.floatingParent.scrollLeft(this.s.scrollLeft.header);
  320. }
  321. scrollLeftUpdate();
  322. scrollBody.scroll(scrollLeftUpdate)
  323. // Insert a fake thead/tfoot into the DataTable to stop it jumping around
  324. itemDom.placeholder = itemElement.clone( false );
  325. itemDom.placeholder
  326. .find( '*[id]' )
  327. .removeAttr( 'id' );
  328. itemDom.host.prepend( itemDom.placeholder );
  329. // Clone widths
  330. this._matchWidths( itemDom.placeholder, itemDom.floating );
  331. }
  332. },
  333. /**
  334. * This method sets the sticky position of the header elements to match fixed columns
  335. * @param {JQuery<HTMLElement>} el
  336. * @param {string} sign
  337. */
  338. _stickyPosition(el, sign) {
  339. if (this._scrollEnabled()) {
  340. var that = this
  341. var rtl = $(that.s.dt.table().node()).css('direction') === 'rtl';
  342. el.find('th').each(function() {
  343. // Find out if fixed header has previously set this column
  344. if ($(this).css('position') === 'sticky') {
  345. var right = $(this).css('right');
  346. var left = $(this).css('left');
  347. if (right !== 'auto' && !rtl) {
  348. // New position either adds or dismisses the barWidth
  349. var potential = +right.replace(/px/g, '') + (sign === '-' ? -1 : 1) * that.s.dt.settings()[0].oBrowser.barWidth;
  350. $(this).css('right', potential > 0 ? potential : 0);
  351. }
  352. else if(left !== 'auto' && rtl) {
  353. var potential = +left.replace(/px/g, '') + (sign === '-' ? -1 : 1) * that.s.dt.settings()[0].oBrowser.barWidth;
  354. $(this).css('left', potential > 0 ? potential : 0);
  355. }
  356. }
  357. });
  358. }
  359. },
  360. /**
  361. * Copy widths from the cells in one element to another. This is required
  362. * for the footer as the footer in the main table takes its sizes from the
  363. * header columns. That isn't present in the footer so to have it still
  364. * align correctly, the sizes need to be copied over. It is also required
  365. * for the header when auto width is not enabled
  366. *
  367. * @param {jQuery} from Copy widths from
  368. * @param {jQuery} to Copy widths to
  369. * @private
  370. */
  371. _matchWidths: function ( from, to ) {
  372. var get = function ( name ) {
  373. return $(name, from)
  374. .map( function () {
  375. return $(this).css('width').replace(/[^\d\.]/g, '') * 1;
  376. } ).toArray();
  377. };
  378. var set = function ( name, toWidths ) {
  379. $(name, to).each( function ( i ) {
  380. $(this).css( {
  381. width: toWidths[i],
  382. minWidth: toWidths[i]
  383. } );
  384. } );
  385. };
  386. var thWidths = get( 'th' );
  387. var tdWidths = get( 'td' );
  388. set( 'th', thWidths );
  389. set( 'td', tdWidths );
  390. },
  391. /**
  392. * Remove assigned widths from the cells in an element. This is required
  393. * when inserting the footer back into the main table so the size is defined
  394. * by the header columns and also when auto width is disabled in the
  395. * DataTable.
  396. *
  397. * @param {string} item The `header` or `footer`
  398. * @private
  399. */
  400. _unsize: function ( item ) {
  401. var el = this.dom[ item ].floating;
  402. if ( el && (item === 'footer' || (item === 'header' && ! this.s.autoWidth)) ) {
  403. $('th, td', el).css( {
  404. width: '',
  405. minWidth: ''
  406. } );
  407. }
  408. else if ( el && item === 'header' ) {
  409. $('th, td', el).css( 'min-width', '' );
  410. }
  411. },
  412. /**
  413. * Reposition the floating elements to take account of horizontal page
  414. * scroll
  415. *
  416. * @param {string} item The `header` or `footer`
  417. * @param {int} scrollLeft Document scrollLeft
  418. * @private
  419. */
  420. _horizontal: function ( item, scrollLeft )
  421. {
  422. var itemDom = this.dom[ item ];
  423. var position = this.s.position;
  424. var lastScrollLeft = this.s.scrollLeft;
  425. if ( itemDom.floating && lastScrollLeft[ item ] !== scrollLeft ) {
  426. // If scrolling is enabled we need to match the floating header to the body
  427. if (this._scrollEnabled()) {
  428. var newScrollLeft = $($(this.s.dt.table().node()).parent()).scrollLeft()
  429. itemDom.floating.scrollLeft(newScrollLeft);
  430. itemDom.floatingParent.scrollLeft(newScrollLeft);
  431. }
  432. lastScrollLeft[ item ] = scrollLeft;
  433. }
  434. },
  435. /**
  436. * Change from one display mode to another. Each fixed item can be in one
  437. * of:
  438. *
  439. * * `in-place` - In the main DataTable
  440. * * `in` - Floating over the DataTable
  441. * * `below` - (Header only) Fixed to the bottom of the table body
  442. * * `above` - (Footer only) Fixed to the top of the table body
  443. *
  444. * @param {string} mode Mode that the item should be shown in
  445. * @param {string} item 'header' or 'footer'
  446. * @param {boolean} forceChange Force a redraw of the mode, even if already
  447. * in that mode.
  448. * @private
  449. */
  450. _modeChange: function ( mode, item, forceChange )
  451. {
  452. var dt = this.s.dt;
  453. var itemDom = this.dom[ item ];
  454. var position = this.s.position;
  455. // Just determine if scroll is enabled once
  456. var scrollEnabled = this._scrollEnabled();
  457. // If footer and scrolling is enabled then we don't clone
  458. // Instead the table's height is decreased accordingly - see `_scroll()`
  459. if (item === 'footer' && scrollEnabled) {
  460. return;
  461. }
  462. // It isn't trivial to add a !important css attribute...
  463. var importantWidth = function (w) {
  464. itemDom.floating.attr('style', function(i,s) {
  465. return (s || '') + 'width: '+w+'px !important;';
  466. });
  467. // If not scrolling also have to update the floatingParent
  468. if (!scrollEnabled) {
  469. itemDom.floatingParent.attr('style', function(i,s) {
  470. return (s || '') + 'width: '+w+'px !important;';
  471. });
  472. }
  473. };
  474. // Record focus. Browser's will cause input elements to loose focus if
  475. // they are inserted else where in the doc
  476. var tablePart = this.dom[ item==='footer' ? 'tfoot' : 'thead' ];
  477. var focus = $.contains( tablePart[0], document.activeElement ) ?
  478. document.activeElement :
  479. null;
  480. var scrollBody = $($(this.s.dt.table().node()).parent());
  481. if ( mode === 'in-place' ) {
  482. // Insert the header back into the table's real header
  483. if ( itemDom.placeholder ) {
  484. itemDom.placeholder.remove();
  485. itemDom.placeholder = null;
  486. }
  487. this._unsize( item );
  488. if ( item === 'header' ) {
  489. itemDom.host.prepend( tablePart );
  490. }
  491. else {
  492. itemDom.host.append( tablePart );
  493. }
  494. if ( itemDom.floating ) {
  495. itemDom.floating.remove();
  496. itemDom.floating = null;
  497. this._stickyPosition(itemDom.host, '+');
  498. }
  499. if ( itemDom.floatingParent ) {
  500. itemDom.floatingParent.remove();
  501. }
  502. $($(itemDom.host.parent()).parent()).scrollLeft(scrollBody.scrollLeft())
  503. }
  504. else if ( mode === 'in' ) {
  505. // Remove the header from the read header and insert into a fixed
  506. // positioned floating table clone
  507. this._clone( item, forceChange );
  508. // Get useful position values
  509. var scrollOffset = scrollBody.offset();
  510. var windowTop = $(document).scrollTop();
  511. var windowHeight = $(window).height();
  512. var windowBottom = windowTop + windowHeight;
  513. var bodyTop = scrollEnabled ? scrollOffset.top : position.tbodyTop;
  514. var bodyBottom = scrollEnabled ? scrollOffset.top + scrollBody.outerHeight() : position.tfootTop
  515. // Calculate the amount that the footer or header needs to be shuffled
  516. var shuffle = item === 'footer' ?
  517. // footer and top of body isn't on screen
  518. bodyTop > windowBottom ?
  519. // Yes - push the footer below
  520. position.tfootHeight :
  521. // No - bottom set to the gap between the top of the body and the bottom of the window
  522. bodyTop + position.tfootHeight - windowBottom :
  523. // Otherwise must be a header so get the difference from the bottom of the
  524. // desired floating header and the bottom of the table body
  525. windowTop + this.c.headerOffset + position.theadHeight - bodyBottom
  526. // Set the top or bottom based off of the offset and the shuffle value
  527. var prop = item === 'header' ? 'top' : 'bottom';
  528. var val = this.c[item+'Offset'] - (shuffle > 0 ? shuffle : 0);
  529. itemDom.floating.addClass( 'fixedHeader-floating' );
  530. itemDom.floatingParent
  531. .css(prop, val)
  532. .css( {
  533. 'left': position.left,
  534. 'height': item === 'header' ? position.theadHeight : position.tfootHeight,
  535. 'z-index': 2
  536. })
  537. .append(itemDom.floating);
  538. importantWidth(position.width);
  539. if ( item === 'footer' ) {
  540. itemDom.floating.css( 'top', '' );
  541. }
  542. }
  543. else if ( mode === 'below' ) { // only used for the header
  544. // Fix the position of the floating header at base of the table body
  545. this._clone( item, forceChange );
  546. itemDom.floating.addClass( 'fixedHeader-locked' );
  547. itemDom.floatingParent.css({
  548. position: 'absolute',
  549. top: position.tfootTop - position.theadHeight,
  550. left: position.left+'px'
  551. });
  552. importantWidth(position.width);
  553. }
  554. else if ( mode === 'above' ) { // only used for the footer
  555. // Fix the position of the floating footer at top of the table body
  556. this._clone( item, forceChange );
  557. itemDom.floating.addClass( 'fixedHeader-locked' );
  558. itemDom.floatingParent.css({
  559. position: 'absolute',
  560. top: position.tbodyTop,
  561. left: position.left+'px'
  562. });
  563. importantWidth(position.width);
  564. }
  565. // Restore focus if it was lost
  566. if ( focus && focus !== document.activeElement ) {
  567. setTimeout( function () {
  568. focus.focus();
  569. }, 10 );
  570. }
  571. this.s.scrollLeft.header = -1;
  572. this.s.scrollLeft.footer = -1;
  573. this.s[item+'Mode'] = mode;
  574. },
  575. /**
  576. * Cache the positional information that is required for the mode
  577. * calculations that FixedHeader performs.
  578. *
  579. * @private
  580. */
  581. _positions: function ()
  582. {
  583. var dt = this.s.dt;
  584. var table = dt.table();
  585. var position = this.s.position;
  586. var dom = this.dom;
  587. var tableNode = $(table.node());
  588. var scrollEnabled = this._scrollEnabled();
  589. // Need to use the header and footer that are in the main table,
  590. // regardless of if they are clones, since they hold the positions we
  591. // want to measure from
  592. var thead = $(dt.table().header());
  593. var tfoot = $(dt.table().footer());
  594. var tbody = dom.tbody;
  595. var scrollBody = tableNode.parent();
  596. position.visible = tableNode.is(':visible');
  597. position.width = tableNode.outerWidth();
  598. position.left = tableNode.offset().left;
  599. position.theadTop = thead.offset().top;
  600. position.tbodyTop = scrollEnabled ? scrollBody.offset().top : tbody.offset().top;
  601. position.tbodyHeight = scrollEnabled ? scrollBody.outerHeight() : tbody.outerHeight();
  602. position.theadHeight = thead.outerHeight();
  603. position.theadBottom = position.theadTop + position.theadHeight;
  604. if ( tfoot.length ) {
  605. position.tfootTop = position.tbodyTop + position.tbodyHeight; //tfoot.offset().top;
  606. position.tfootBottom = position.tfootTop + tfoot.outerHeight();
  607. position.tfootHeight = tfoot.outerHeight();
  608. }
  609. else {
  610. position.tfootTop = position.tbodyTop + tbody.outerHeight();
  611. position.tfootBottom = position.tfootTop;
  612. position.tfootHeight = position.tfootTop;
  613. }
  614. },
  615. /**
  616. * Mode calculation - determine what mode the fixed items should be placed
  617. * into.
  618. *
  619. * @param {boolean} forceChange Force a redraw of the mode, even if already
  620. * in that mode.
  621. * @private
  622. */
  623. _scroll: function ( forceChange )
  624. {
  625. // ScrollBody details
  626. var scrollEnabled = this._scrollEnabled();
  627. var scrollBody = $(this.s.dt.table().node()).parent();
  628. var scrollOffset = scrollBody.offset();
  629. var scrollHeight = scrollBody.outerHeight();
  630. // Window details
  631. var windowLeft = $(document).scrollLeft();
  632. var windowTop = $(document).scrollTop();
  633. var windowHeight = $(window).height();
  634. var windowBottom = windowHeight + windowTop
  635. var position = this.s.position;
  636. var headerMode, footerMode;
  637. // Body Details
  638. var bodyTop = (scrollEnabled ? scrollOffset.top : position.tbodyTop);
  639. var bodyLeft = (scrollEnabled ? scrollOffset.left : position.left);
  640. var bodyBottom = (scrollEnabled ? scrollOffset.top + scrollHeight : position.tfootTop);
  641. var bodyWidth = (scrollEnabled ? scrollBody.outerWidth() : position.tbodyWidth);
  642. var windowBottom = windowTop + windowHeight;
  643. if ( this.c.header ) {
  644. if ( ! this.s.enable ) {
  645. headerMode = 'in-place';
  646. }
  647. // The header is in it's normal place if the body top is lower than
  648. // the scroll of the window plus the headerOffset and the height of the header
  649. else if ( ! position.visible || windowTop + this.c.headerOffset + position.theadHeight <= bodyTop) {
  650. headerMode = 'in-place';
  651. }
  652. // The header should be floated if
  653. else if (
  654. // The scrolling plus the header offset plus the height of the header is lower than the top of the body
  655. windowTop + this.c.headerOffset + position.theadHeight > bodyTop &&
  656. // And the scrolling at the top plus the header offset is above the bottom of the body
  657. windowTop + this.c.headerOffset < bodyBottom
  658. ) {
  659. headerMode = 'in';
  660. var scrollBody = $($(this.s.dt.table().node()).parent());
  661. // Further to the above, If the scrolling plus the header offset plus the header height is lower
  662. // than the bottom of the table a shuffle is required so have to force the calculation
  663. if(windowTop + this.c.headerOffset + position.theadHeight > bodyBottom || this.dom.header.floatingParent === undefined){
  664. forceChange = true;
  665. }
  666. else {
  667. this.dom.header.floatingParent
  668. .css({
  669. 'top': this.c.headerOffset,
  670. 'position': 'fixed'
  671. })
  672. .append(this.dom.header.floating);
  673. }
  674. }
  675. // Anything else and the view is below the table
  676. else {
  677. headerMode = 'below';
  678. }
  679. if ( forceChange || headerMode !== this.s.headerMode ) {
  680. this._modeChange( headerMode, 'header', forceChange );
  681. }
  682. this._horizontal( 'header', windowLeft );
  683. }
  684. var header = {
  685. offset: {top: 0, left: 0},
  686. height: 0
  687. }
  688. var footer = {
  689. offset: {top: 0, left: 0},
  690. height: 0
  691. }
  692. if ( this.c.footer && this.dom.tfoot.length ) {
  693. if ( ! this.s.enable ) {
  694. footerMode = 'in-place';
  695. }
  696. else if ( ! position.visible || position.tfootBottom + this.c.footerOffset <= windowBottom ) {
  697. footerMode = 'in-place';
  698. }
  699. else if (
  700. bodyBottom + position.tfootHeight + this.c.footerOffset > windowBottom &&
  701. bodyTop + this.c.footerOffset < windowBottom
  702. ) {
  703. footerMode = 'in';
  704. forceChange = true;
  705. }
  706. else {
  707. footerMode = 'above';
  708. }
  709. if ( forceChange || footerMode !== this.s.footerMode ) {
  710. this._modeChange( footerMode, 'footer', forceChange );
  711. }
  712. this._horizontal( 'footer', windowLeft );
  713. var getOffsetHeight = (el) => {
  714. return {
  715. offset: el.offset(),
  716. height: el.outerHeight()
  717. }
  718. }
  719. header = this.dom.header.floating ? getOffsetHeight(this.dom.header.floating) : getOffsetHeight(this.dom.thead);
  720. footer = this.dom.footer.floating ? getOffsetHeight(this.dom.footer.floating) : getOffsetHeight(this.dom.tfoot);
  721. // If scrolling is enabled and the footer is off the screen
  722. if (scrollEnabled && footer.offset.top > windowTop){// && footer.offset.top >= windowBottom) {
  723. // Calculate the gap between the top of the scrollBody and the top of the window
  724. var overlap = windowTop - scrollOffset.top;
  725. // The new height is the bottom of the window
  726. var newHeight = windowBottom +
  727. // If the gap between the top of the scrollbody and the window is more than
  728. // the height of the header then the top of the table is still visible so add that gap
  729. // Doing this has effectively calculated the height from the top of the table to the bottom of the current page
  730. (overlap > -header.height ? overlap : 0) -
  731. // Take from that
  732. (
  733. // The top of the header plus
  734. header.offset.top +
  735. // The header height if the standard header is present
  736. (overlap < -header.height ? header.height : 0) +
  737. // And the height of the footer
  738. footer.height
  739. )
  740. // Don't want a negative height
  741. if (newHeight < 0) {
  742. newHeight = 0;
  743. }
  744. // At the end of the above calculation the space between the header (top of the page if floating)
  745. // and the point just above the footer should be the new value for the height of the table.
  746. scrollBody.outerHeight(newHeight);
  747. // Need some rounding here as sometimes very small decimal places are encountered
  748. // If the actual height is bigger or equal to the height we just applied then the footer is "Floating"
  749. if(Math.round(scrollBody.outerHeight()) >= Math.round(newHeight)) {
  750. $(this.dom.tfoot.parent()).addClass("fixedHeader-floating");
  751. }
  752. // Otherwise max-width has kicked in so it is not floating
  753. else {
  754. $(this.dom.tfoot.parent()).removeClass("fixedHeader-floating");
  755. }
  756. }
  757. }
  758. if(this.dom.header.floating){
  759. this.dom.header.floatingParent.css('left', bodyLeft-windowLeft);
  760. }
  761. if(this.dom.footer.floating){
  762. this.dom.footer.floatingParent.css('left', bodyLeft-windowLeft);
  763. }
  764. // If fixed columns is being used on this table then the blockers need to be copied across
  765. // Cloning these is cleaner than creating as our own as it will keep consistency with fixedColumns automatically
  766. // ASSUMING that the class remains the same
  767. if (this.s.dt.settings()[0]._fixedColumns !== undefined) {
  768. var adjustBlocker = (side, end, el) => {
  769. if (el === undefined) {
  770. let blocker = $('div.dtfc-'+side+'-'+end+'-blocker');
  771. el = blocker.length === 0 ?
  772. null :
  773. blocker.clone().appendTo('body').css('z-index', 1);
  774. }
  775. if(el !== null) {
  776. el.css({
  777. top: end === 'top' ? header.offset.top : footer.offset.top,
  778. left: side === 'right' ? bodyLeft + bodyWidth - el.width() : bodyLeft
  779. });
  780. }
  781. return el;
  782. }
  783. // Adjust all blockers
  784. this.dom.header.rightBlocker = adjustBlocker('right', 'top', this.dom.header.rightBlocker);
  785. this.dom.header.leftBlocker = adjustBlocker('left', 'top', this.dom.header.leftBlocker);
  786. this.dom.footer.rightBlocker = adjustBlocker('right', 'bottom', this.dom.footer.rightBlocker);
  787. this.dom.footer.leftBlocker = adjustBlocker('left', 'bottom', this.dom.footer.leftBlocker);
  788. }
  789. },
  790. /**
  791. * Function to check if scrolling is enabled on the table or not
  792. * @returns Boolean value indicating if scrolling on the table is enabled or not
  793. */
  794. _scrollEnabled: function() {
  795. var oScroll = this.s.dt.settings()[0].oScroll;
  796. if(oScroll.sY !== "" || oScroll.sX !== "") {
  797. return true;
  798. }
  799. return false
  800. }
  801. } );
  802. /**
  803. * Version
  804. * @type {String}
  805. * @static
  806. */
  807. FixedHeader.version = "3.2.1";
  808. /**
  809. * Defaults
  810. * @type {Object}
  811. * @static
  812. */
  813. FixedHeader.defaults = {
  814. header: true,
  815. footer: false,
  816. headerOffset: 0,
  817. footerOffset: 0
  818. };
  819. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  820. * DataTables interfaces
  821. */
  822. // Attach for constructor access
  823. $.fn.dataTable.FixedHeader = FixedHeader;
  824. $.fn.DataTable.FixedHeader = FixedHeader;
  825. // DataTables creation - check if the FixedHeader option has been defined on the
  826. // table and if so, initialise
  827. $(document).on( 'init.dt.dtfh', function (e, settings, json) {
  828. if ( e.namespace !== 'dt' ) {
  829. return;
  830. }
  831. var init = settings.oInit.fixedHeader;
  832. var defaults = DataTable.defaults.fixedHeader;
  833. if ( (init || defaults) && ! settings._fixedHeader ) {
  834. var opts = $.extend( {}, defaults, init );
  835. if ( init !== false ) {
  836. new FixedHeader( settings, opts );
  837. }
  838. }
  839. } );
  840. // DataTables API methods
  841. DataTable.Api.register( 'fixedHeader()', function () {} );
  842. DataTable.Api.register( 'fixedHeader.adjust()', function () {
  843. return this.iterator( 'table', function ( ctx ) {
  844. var fh = ctx._fixedHeader;
  845. if ( fh ) {
  846. fh.update();
  847. }
  848. } );
  849. } );
  850. DataTable.Api.register( 'fixedHeader.enable()', function ( flag ) {
  851. return this.iterator( 'table', function ( ctx ) {
  852. var fh = ctx._fixedHeader;
  853. flag = ( flag !== undefined ? flag : true );
  854. if ( fh && flag !== fh.enabled() ) {
  855. fh.enable( flag );
  856. }
  857. } );
  858. } );
  859. DataTable.Api.register( 'fixedHeader.enabled()', function () {
  860. if ( this.context.length ) {
  861. var fh = this.context[0]._fixedHeader;
  862. if ( fh ) {
  863. return fh.enabled();
  864. }
  865. }
  866. return false;
  867. } );
  868. DataTable.Api.register( 'fixedHeader.disable()', function ( ) {
  869. return this.iterator( 'table', function ( ctx ) {
  870. var fh = ctx._fixedHeader;
  871. if ( fh && fh.enabled() ) {
  872. fh.enable( false );
  873. }
  874. } );
  875. } );
  876. $.each( ['header', 'footer'], function ( i, el ) {
  877. DataTable.Api.register( 'fixedHeader.'+el+'Offset()', function ( offset ) {
  878. var ctx = this.context;
  879. if ( offset === undefined ) {
  880. return ctx.length && ctx[0]._fixedHeader ?
  881. ctx[0]._fixedHeader[el +'Offset']() :
  882. undefined;
  883. }
  884. return this.iterator( 'table', function ( ctx ) {
  885. var fh = ctx._fixedHeader;
  886. if ( fh ) {
  887. fh[ el +'Offset' ]( offset );
  888. }
  889. } );
  890. } );
  891. } );
  892. return FixedHeader;
  893. }));