dataTables.fixedHeader.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634
  1. /*! FixedHeader 3.1.1-dev
  2. * ©2009-2015 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.1.1-dev
  9. * @file dataTables.fixedHeader.js
  10. * @author SpryMedia Ltd (www.sprymedia.co.uk)
  11. * @contact www.sprymedia.co.uk/contact
  12. * @copyright Copyright 2009-2015 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. placeholder: null
  94. },
  95. footer: {
  96. host: null,
  97. floating: null,
  98. placeholder: null
  99. }
  100. };
  101. this.dom.header.host = this.dom.thead.parent();
  102. this.dom.footer.host = this.dom.tfoot.parent();
  103. var dtSettings = dt.settings()[0];
  104. if ( dtSettings._fixedHeader ) {
  105. throw "FixedHeader already initialised on table "+dtSettings.nTable.id;
  106. }
  107. dtSettings._fixedHeader = this;
  108. this._constructor();
  109. };
  110. /*
  111. * Variable: FixedHeader
  112. * Purpose: Prototype for FixedHeader
  113. * Scope: global
  114. */
  115. $.extend( FixedHeader.prototype, {
  116. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  117. * API methods
  118. */
  119. /**
  120. * Enable / disable the fixed elements
  121. *
  122. * @param {boolean} enable `true` to enable, `false` to disable
  123. */
  124. enable: function ( enable )
  125. {
  126. this.s.enable = enable;
  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. this.update();
  134. },
  135. /**
  136. * Set header offset
  137. *
  138. * @param {int} new value for headerOffset
  139. */
  140. headerOffset: function ( offset )
  141. {
  142. if ( offset !== undefined ) {
  143. this.c.headerOffset = offset;
  144. this.update();
  145. }
  146. return this.c.headerOffset;
  147. },
  148. /**
  149. * Set footer offset
  150. *
  151. * @param {int} new value for footerOffset
  152. */
  153. footerOffset: function ( offset )
  154. {
  155. if ( offset !== undefined ) {
  156. this.c.footerOffset = offset;
  157. this.update();
  158. }
  159. return this.c.footerOffset;
  160. },
  161. /**
  162. * Recalculate the position of the fixed elements and force them into place
  163. */
  164. update: function ()
  165. {
  166. this._positions();
  167. this._scroll( true );
  168. },
  169. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  170. * Constructor
  171. */
  172. /**
  173. * FixedHeader constructor - adding the required event listeners and
  174. * simple initialisation
  175. *
  176. * @private
  177. */
  178. _constructor: function ()
  179. {
  180. var that = this;
  181. var dt = this.s.dt;
  182. $(window)
  183. .on( 'scroll'+this.s.namespace, function () {
  184. that._scroll();
  185. } )
  186. .on( 'resize'+this.s.namespace, function () {
  187. that.s.position.windowHeight = $(window).height();
  188. that.update();
  189. } );
  190. dt.on( 'column-reorder.dt.dtfc column-visibility.dt.dtfc draw.dt.dtfc', function () {
  191. that.update();
  192. } );
  193. dt.on( 'destroy.dtfc', function () {
  194. dt.off( '.dtfc' );
  195. $(window).off( that.s.namespace );
  196. } );
  197. this._positions();
  198. this._scroll();
  199. },
  200. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  201. * Private methods
  202. */
  203. /**
  204. * Clone a fixed item to act as a place holder for the original element
  205. * which is moved into a clone of the table element, and moved around the
  206. * document to give the fixed effect.
  207. *
  208. * @param {string} item 'header' or 'footer'
  209. * @param {boolean} force Force the clone to happen, or allow automatic
  210. * decision (reuse existing if available)
  211. * @private
  212. */
  213. _clone: function ( item, force )
  214. {
  215. var dt = this.s.dt;
  216. var itemDom = this.dom[ item ];
  217. var itemElement = item === 'header' ?
  218. this.dom.thead :
  219. this.dom.tfoot;
  220. if ( ! force && itemDom.floating ) {
  221. // existing floating element - reuse it
  222. itemDom.floating.removeClass( 'fixedHeader-floating fixedHeader-locked' );
  223. }
  224. else {
  225. if ( itemDom.floating ) {
  226. itemDom.placeholder.remove();
  227. itemDom.floating.children().detach();
  228. itemDom.floating.remove();
  229. }
  230. itemDom.floating = $( dt.table().node().cloneNode( false ) )
  231. .removeAttr( 'id' )
  232. .append( itemElement )
  233. .appendTo( 'body' );
  234. // Insert a fake thead/tfoot into the DataTable to stop it jumping around
  235. itemDom.placeholder = itemElement.clone( false );
  236. itemDom.host.prepend( itemDom.placeholder );
  237. // Clone widths
  238. this._matchWidths( itemDom.placeholder, itemDom.floating );
  239. }
  240. },
  241. /**
  242. * Copy widths from the cells in one element to another. This is required
  243. * for the footer as the footer in the main table takes its sizes from the
  244. * header columns. That isn't present in the footer so to have it still
  245. * align correctly, the sizes need to be copied over. It is also required
  246. * for the header when auto width is not enabled
  247. *
  248. * @param {jQuery} from Copy widths from
  249. * @param {jQuery} to Copy widths to
  250. * @private
  251. */
  252. _matchWidths: function ( from, to ) {
  253. var get = function ( name ) {
  254. return $(name, from)
  255. .map( function () {
  256. return $(this).width();
  257. } ).toArray();
  258. };
  259. var set = function ( name, toWidths ) {
  260. $(name, to).each( function ( i ) {
  261. $(this).width( toWidths[i] ).css("min-width", toWidths[i] );
  262. } );
  263. };
  264. var thWidths = get( 'th' );
  265. var tdWidths = get( 'td' );
  266. set( 'th', thWidths );
  267. set( 'td', tdWidths );
  268. },
  269. /**
  270. * Remove assigned widths from the cells in an element. This is required
  271. * when inserting the footer back into the main table so the size is defined
  272. * by the header columns and also when auto width is disabled in the
  273. * DataTable.
  274. *
  275. * @param {string} item The `header` or `footer`
  276. * @private
  277. */
  278. _unsize: function ( item ) {
  279. var el = this.dom[ item ].floating;
  280. if ( el && (item === 'footer' || (item === 'header' && ! this.s.autoWidth)) ) {
  281. $('th, td', el).css( 'width', '' );
  282. }
  283. },
  284. /**
  285. * Reposition the floating elements to take account of horizontal page
  286. * scroll
  287. *
  288. * @param {string} item The `header` or `footer`
  289. * @param {int} scrollLeft Document scrollLeft
  290. * @private
  291. */
  292. _horizontal: function ( item, scrollLeft )
  293. {
  294. var itemDom = this.dom[ item ];
  295. var position = this.s.position;
  296. var lastScrollLeft = this.s.scrollLeft;
  297. if ( itemDom.floating && lastScrollLeft[ item ] !== scrollLeft ) {
  298. itemDom.floating.css( 'left', position.left - scrollLeft );
  299. lastScrollLeft[ item ] = scrollLeft;
  300. }
  301. },
  302. /**
  303. * Change from one display mode to another. Each fixed item can be in one
  304. * of:
  305. *
  306. * * `in-place` - In the main DataTable
  307. * * `in` - Floating over the DataTable
  308. * * `below` - (Header only) Fixed to the bottom of the table body
  309. * * `above` - (Footer only) Fixed to the top of the table body
  310. *
  311. * @param {string} mode Mode that the item should be shown in
  312. * @param {string} item 'header' or 'footer'
  313. * @param {boolean} forceChange Force a redraw of the mode, even if already
  314. * in that mode.
  315. * @private
  316. */
  317. _modeChange: function ( mode, item, forceChange )
  318. {
  319. var dt = this.s.dt;
  320. var itemDom = this.dom[ item ];
  321. var position = this.s.position;
  322. if ( mode === 'in-place' ) {
  323. // Insert the header back into the table's real header
  324. if ( itemDom.placeholder ) {
  325. itemDom.placeholder.remove();
  326. itemDom.placeholder = null;
  327. }
  328. this._unsize( item );
  329. if ( item === 'header' ) {
  330. itemDom.host.prepend( this.dom.thead );
  331. }
  332. else {
  333. itemDom.host.append( this.dom.tfoot );
  334. }
  335. if ( itemDom.floating ) {
  336. itemDom.floating.remove();
  337. itemDom.floating = null;
  338. }
  339. }
  340. else if ( mode === 'in' ) {
  341. // Remove the header from the read header and insert into a fixed
  342. // positioned floating table clone
  343. this._clone( item, forceChange );
  344. itemDom.floating
  345. .addClass( 'fixedHeader-floating' )
  346. .css( item === 'header' ? 'top' : 'bottom', this.c[item+'Offset'] )
  347. .css( 'left', position.left+'px' )
  348. .css( 'width', position.width+'px' );
  349. if ( item === 'footer' ) {
  350. itemDom.floating.css( 'top', '' );
  351. }
  352. }
  353. else if ( mode === 'below' ) { // only used for the header
  354. // Fix the position of the floating header at base of the table body
  355. this._clone( item, forceChange );
  356. itemDom.floating
  357. .addClass( 'fixedHeader-locked' )
  358. .css( 'top', position.tfootTop - position.theadHeight )
  359. .css( 'left', position.left+'px' )
  360. .css( 'width', position.width+'px' );
  361. }
  362. else if ( mode === 'above' ) { // only used for the footer
  363. // Fix the position of the floating footer at top of the table body
  364. this._clone( item, forceChange );
  365. itemDom.floating
  366. .addClass( 'fixedHeader-locked' )
  367. .css( 'top', position.tbodyTop )
  368. .css( 'left', position.left+'px' )
  369. .css( 'width', position.width+'px' );
  370. }
  371. this.s.scrollLeft.header = -1;
  372. this.s.scrollLeft.footer = -1;
  373. this.s[item+'Mode'] = mode;
  374. },
  375. /**
  376. * Cache the positional information that is required for the mode
  377. * calculations that FixedHeader performs.
  378. *
  379. * @private
  380. */
  381. _positions: function ()
  382. {
  383. var dt = this.s.dt;
  384. var table = dt.table();
  385. var position = this.s.position;
  386. var dom = this.dom;
  387. var tableNode = $(table.node());
  388. // Need to use the header and footer that are in the main table,
  389. // regardless of if they are clones, since they hold the positions we
  390. // want to measure from
  391. var thead = tableNode.children('thead');
  392. var tfoot = tableNode.children('tfoot');
  393. var tbody = dom.tbody;
  394. position.visible = tableNode.is(':visible');
  395. position.width = tableNode.outerWidth();
  396. position.left = tableNode.offset().left;
  397. position.theadTop = thead.offset().top;
  398. position.tbodyTop = tbody.offset().top;
  399. position.theadHeight = position.tbodyTop - position.theadTop;
  400. if ( tfoot.length ) {
  401. position.tfootTop = tfoot.offset().top;
  402. position.tfootBottom = position.tfootTop + tfoot.outerHeight();
  403. position.tfootHeight = position.tfootBottom - position.tfootTop;
  404. }
  405. else {
  406. position.tfootTop = position.tbodyTop + tbody.outerHeight();
  407. position.tfootBottom = position.tfootTop;
  408. position.tfootHeight = position.tfootTop;
  409. }
  410. },
  411. /**
  412. * Mode calculation - determine what mode the fixed items should be placed
  413. * into.
  414. *
  415. * @param {boolean} forceChange Force a redraw of the mode, even if already
  416. * in that mode.
  417. * @private
  418. */
  419. _scroll: function ( forceChange )
  420. {
  421. var windowTop = $(document).scrollTop();
  422. var windowLeft = $(document).scrollLeft();
  423. var position = this.s.position;
  424. var headerMode, footerMode;
  425. if ( ! this.s.enable ) {
  426. return;
  427. }
  428. if ( this.c.header ) {
  429. if ( ! position.visible || windowTop <= position.theadTop - this.c.headerOffset ) {
  430. headerMode = 'in-place';
  431. }
  432. else if ( windowTop <= position.tfootTop - position.theadHeight - this.c.headerOffset ) {
  433. headerMode = 'in';
  434. }
  435. else {
  436. headerMode = 'below';
  437. }
  438. if ( forceChange || headerMode !== this.s.headerMode ) {
  439. this._modeChange( headerMode, 'header', forceChange );
  440. }
  441. this._horizontal( 'header', windowLeft );
  442. }
  443. if ( this.c.footer && this.dom.tfoot.length ) {
  444. if ( ! position.visible || windowTop + position.windowHeight >= position.tfootBottom + this.c.footerOffset ) {
  445. footerMode = 'in-place';
  446. }
  447. else if ( position.windowHeight + windowTop > position.tbodyTop + position.tfootHeight + this.c.footerOffset ) {
  448. footerMode = 'in';
  449. }
  450. else {
  451. footerMode = 'above';
  452. }
  453. if ( forceChange || footerMode !== this.s.footerMode ) {
  454. this._modeChange( footerMode, 'footer', forceChange );
  455. }
  456. this._horizontal( 'footer', windowLeft );
  457. }
  458. }
  459. } );
  460. /**
  461. * Version
  462. * @type {String}
  463. * @static
  464. */
  465. FixedHeader.version = "3.1.1-dev";
  466. /**
  467. * Defaults
  468. * @type {Object}
  469. * @static
  470. */
  471. FixedHeader.defaults = {
  472. header: true,
  473. footer: false,
  474. headerOffset: 0,
  475. footerOffset: 0
  476. };
  477. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  478. * DataTables interfaces
  479. */
  480. // Attach for constructor access
  481. $.fn.dataTable.FixedHeader = FixedHeader;
  482. $.fn.DataTable.FixedHeader = FixedHeader;
  483. // DataTables creation - check if the FixedHeader option has been defined on the
  484. // table and if so, initialise
  485. $(document).on( 'init.dt.dtb', function (e, settings, json) {
  486. if ( e.namespace !== 'dt' ) {
  487. return;
  488. }
  489. var opts = settings.oInit.fixedHeader || DataTable.defaults.fixedHeader;
  490. if ( opts && ! settings._fixedHeader ) {
  491. new FixedHeader( settings, opts );
  492. }
  493. } );
  494. // DataTables API methods
  495. DataTable.Api.register( 'fixedHeader()', function () {} );
  496. DataTable.Api.register( 'fixedHeader.adjust()', function () {
  497. return this.iterator( 'table', function ( ctx ) {
  498. var fh = ctx._fixedHeader;
  499. if ( fh ) {
  500. fh.update();
  501. }
  502. } );
  503. } );
  504. DataTable.Api.register( 'fixedHeader.enable()', function ( flag ) {
  505. return this.iterator( 'table', function ( ctx ) {
  506. var fh = ctx._fixedHeader;
  507. if ( fh ) {
  508. fh.enable( flag !== undefined ? flag : true );
  509. }
  510. } );
  511. } );
  512. DataTable.Api.register( 'fixedHeader.disable()', function ( ) {
  513. return this.iterator( 'table', function ( ctx ) {
  514. var fh = ctx._fixedHeader;
  515. if ( fh ) {
  516. fh.enable( false );
  517. }
  518. } );
  519. } );
  520. $.each( ['header', 'footer'], function ( i, el ) {
  521. DataTable.Api.register( 'fixedHeader.'+el+'Offset()', function ( offset ) {
  522. var ctx = this.context;
  523. if ( offset === undefined ) {
  524. return ctx.length && ctx[0]._fixedHeader ?
  525. ctx[0]._fixedHeader[el +'Offset']() :
  526. undefined;
  527. }
  528. return this.iterator( 'table', function ( ctx ) {
  529. var fh = ctx._fixedHeader;
  530. if ( fh ) {
  531. fh[ el +'Offset' ]( offset );
  532. }
  533. } );
  534. } );
  535. } );
  536. return FixedHeader;
  537. }));