dataTables.fixedColumns.js 46 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659
  1. /*! FixedColumns 3.8.0
  2. * ©2010-2018 SpryMedia Ltd - datatables.net/license
  3. */
  4. /**
  5. * @summary FixedColumns
  6. * @description Freeze columns in place on a scrolling DataTable
  7. * @version 3.8.0
  8. * @file dataTables.fixedColumns.js
  9. * @author SpryMedia Ltd (www.sprymedia.co.uk)
  10. * @contact www.sprymedia.co.uk/contact
  11. * @copyright Copyright 2010-2018 SpryMedia Ltd.
  12. *
  13. * This source file is free software, available under the following license:
  14. * MIT license - http://datatables.net/license/mit
  15. *
  16. * This source file is distributed in the hope that it will be useful, but
  17. * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
  18. * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
  19. *
  20. * For details please refer to: http://www.datatables.net
  21. */
  22. (function( factory ){
  23. if ( typeof define === 'function' && define.amd ) {
  24. // AMD
  25. define( ['jquery', 'datatables.net'], function ( $ ) {
  26. return factory( $, window, document );
  27. } );
  28. }
  29. else if ( typeof exports === 'object' ) {
  30. // CommonJS
  31. module.exports = function (root, $) {
  32. if ( ! root ) {
  33. root = window;
  34. }
  35. if ( ! $ || ! $.fn.dataTable ) {
  36. $ = require('datatables.net')(root, $).$;
  37. }
  38. return factory( $, root, root.document );
  39. };
  40. }
  41. else {
  42. // Browser
  43. factory( jQuery, window, document );
  44. }
  45. }(function( $, window, document, undefined ) {
  46. 'use strict';
  47. var DataTable = $.fn.dataTable;
  48. var _firefoxScroll;
  49. /**
  50. * When making use of DataTables' x-axis scrolling feature, you may wish to
  51. * fix the left most column in place. This plug-in for DataTables provides
  52. * exactly this option (note for non-scrolling tables, please use the
  53. * FixedHeader plug-in, which can fix headers and footers). Key
  54. * features include:
  55. *
  56. * * Freezes the left or right most columns to the side of the table
  57. * * Option to freeze two or more columns
  58. * * Full integration with DataTables' scrolling options
  59. * * Speed - FixedColumns is fast in its operation
  60. *
  61. * @class
  62. * @constructor
  63. * @global
  64. * @param {object} dt DataTables instance. With DataTables 1.10 this can also
  65. * be a jQuery collection, a jQuery selector, DataTables API instance or
  66. * settings object.
  67. * @param {object} [init={}] Configuration object for FixedColumns. Options are
  68. * defined by {@link FixedColumns.defaults}
  69. *
  70. * @requires jQuery 1.7+
  71. * @requires DataTables 1.8.0+
  72. *
  73. * @example
  74. * var table = $('#example').dataTable( {
  75. * "scrollX": "100%"
  76. * } );
  77. * new $.fn.dataTable.fixedColumns( table );
  78. */
  79. var FixedColumns = function ( dt, init ) {
  80. var that = this;
  81. /* Sanity check - you just know it will happen */
  82. if ( ! ( this instanceof FixedColumns ) ) {
  83. alert( "FixedColumns warning: FixedColumns must be initialised with the 'new' keyword." );
  84. return;
  85. }
  86. if ( init === undefined || init === true ) {
  87. init = {};
  88. }
  89. // Use the DataTables Hungarian notation mapping method, if it exists to
  90. // provide forwards compatibility for camel case variables
  91. var camelToHungarian = $.fn.dataTable.camelToHungarian;
  92. if ( camelToHungarian ) {
  93. camelToHungarian( FixedColumns.defaults, FixedColumns.defaults, true );
  94. camelToHungarian( FixedColumns.defaults, init );
  95. }
  96. // v1.10 allows the settings object to be got form a number of sources
  97. var dtSettings = new $.fn.dataTable.Api( dt ).settings()[0];
  98. /**
  99. * Settings object which contains customisable information for FixedColumns instance
  100. * @namespace
  101. * @extends FixedColumns.defaults
  102. * @private
  103. */
  104. this.s = {
  105. /**
  106. * DataTables settings objects
  107. * @type object
  108. * @default Obtained from DataTables instance
  109. */
  110. "dt": dtSettings,
  111. /**
  112. * Number of columns in the DataTable - stored for quick access
  113. * @type int
  114. * @default Obtained from DataTables instance
  115. */
  116. "iTableColumns": dtSettings.aoColumns.length,
  117. /**
  118. * Original outer widths of the columns as rendered by DataTables - used to calculate
  119. * the FixedColumns grid bounding box
  120. * @type array.<int>
  121. * @default []
  122. */
  123. "aiOuterWidths": [],
  124. /**
  125. * Original inner widths of the columns as rendered by DataTables - used to apply widths
  126. * to the columns
  127. * @type array.<int>
  128. * @default []
  129. */
  130. "aiInnerWidths": [],
  131. /**
  132. * Is the document layout right-to-left
  133. * @type boolean
  134. */
  135. rtl: $(dtSettings.nTable).css('direction') === 'rtl'
  136. };
  137. /**
  138. * DOM elements used by the class instance
  139. * @namespace
  140. * @private
  141. *
  142. */
  143. this.dom = {
  144. /**
  145. * DataTables scrolling element
  146. * @type node
  147. * @default null
  148. */
  149. "scroller": null,
  150. /**
  151. * DataTables header table
  152. * @type node
  153. * @default null
  154. */
  155. "header": null,
  156. /**
  157. * DataTables body table
  158. * @type node
  159. * @default null
  160. */
  161. "body": null,
  162. /**
  163. * DataTables footer table
  164. * @type node
  165. * @default null
  166. */
  167. "footer": null,
  168. /**
  169. * Display grid elements
  170. * @namespace
  171. */
  172. "grid": {
  173. /**
  174. * Grid wrapper. This is the container element for the 3x3 grid
  175. * @type node
  176. * @default null
  177. */
  178. "wrapper": null,
  179. /**
  180. * DataTables scrolling element. This element is the DataTables
  181. * component in the display grid (making up the main table - i.e.
  182. * not the fixed columns).
  183. * @type node
  184. * @default null
  185. */
  186. "dt": null,
  187. /**
  188. * Left fixed column grid components
  189. * @namespace
  190. */
  191. "left": {
  192. "wrapper": null,
  193. "head": null,
  194. "body": null,
  195. "foot": null
  196. },
  197. /**
  198. * Right fixed column grid components
  199. * @namespace
  200. */
  201. "right": {
  202. "wrapper": null,
  203. "head": null,
  204. "body": null,
  205. "foot": null
  206. }
  207. },
  208. /**
  209. * Cloned table nodes
  210. * @namespace
  211. */
  212. "clone": {
  213. /**
  214. * Left column cloned table nodes
  215. * @namespace
  216. */
  217. "left": {
  218. /**
  219. * Cloned header table
  220. * @type node
  221. * @default null
  222. */
  223. "header": null,
  224. /**
  225. * Cloned body table
  226. * @type node
  227. * @default null
  228. */
  229. "body": null,
  230. /**
  231. * Cloned footer table
  232. * @type node
  233. * @default null
  234. */
  235. "footer": null
  236. },
  237. /**
  238. * Right column cloned table nodes
  239. * @namespace
  240. */
  241. "right": {
  242. /**
  243. * Cloned header table
  244. * @type node
  245. * @default null
  246. */
  247. "header": null,
  248. /**
  249. * Cloned body table
  250. * @type node
  251. * @default null
  252. */
  253. "body": null,
  254. /**
  255. * Cloned footer table
  256. * @type node
  257. * @default null
  258. */
  259. "footer": null
  260. }
  261. }
  262. };
  263. if ( dtSettings._oFixedColumns ) {
  264. throw 'FixedColumns already initialised on this table';
  265. }
  266. /* Attach the instance to the DataTables instance so it can be accessed easily */
  267. dtSettings._oFixedColumns = this;
  268. /* Let's do it */
  269. if ( ! dtSettings._bInitComplete )
  270. {
  271. dtSettings.oApi._fnCallbackReg( dtSettings, 'aoInitComplete', function () {
  272. that._fnConstruct( init );
  273. }, 'FixedColumns' );
  274. }
  275. else
  276. {
  277. this._fnConstruct( init );
  278. }
  279. };
  280. $.extend( FixedColumns.prototype , {
  281. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  282. * Public methods
  283. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  284. /**
  285. * Update the fixed columns - including headers and footers. Note that FixedColumns will
  286. * automatically update the display whenever the host DataTable redraws.
  287. * @returns {void}
  288. * @example
  289. * var table = $('#example').dataTable( {
  290. * "scrollX": "100%"
  291. * } );
  292. * var fc = new $.fn.dataTable.fixedColumns( table );
  293. *
  294. * // at some later point when the table has been manipulated....
  295. * fc.fnUpdate();
  296. */
  297. "fnUpdate": function ()
  298. {
  299. this._fnDraw( true );
  300. },
  301. /**
  302. * Recalculate the resizes of the 3x3 grid that FixedColumns uses for display of the table.
  303. * This is useful if you update the width of the table container. Note that FixedColumns will
  304. * perform this function automatically when the window.resize event is fired.
  305. * @returns {void}
  306. * @example
  307. * var table = $('#example').dataTable( {
  308. * "scrollX": "100%"
  309. * } );
  310. * var fc = new $.fn.dataTable.fixedColumns( table );
  311. *
  312. * // Resize the table container and then have FixedColumns adjust its layout....
  313. * $('#content').width( 1200 );
  314. * fc.fnRedrawLayout();
  315. */
  316. "fnRedrawLayout": function ()
  317. {
  318. this._fnColCalc();
  319. this._fnGridLayout();
  320. this.fnUpdate();
  321. },
  322. /**
  323. * Mark a row such that it's height should be recalculated when using 'semiauto' row
  324. * height matching. This function will have no effect when 'none' or 'auto' row height
  325. * matching is used.
  326. * @param {Node} nTr TR element that should have it's height recalculated
  327. * @returns {void}
  328. * @example
  329. * var table = $('#example').dataTable( {
  330. * "scrollX": "100%"
  331. * } );
  332. * var fc = new $.fn.dataTable.fixedColumns( table );
  333. *
  334. * // manipulate the table - mark the row as needing an update then update the table
  335. * // this allows the redraw performed by DataTables fnUpdate to recalculate the row
  336. * // height
  337. * fc.fnRecalculateHeight();
  338. * table.fnUpdate( $('#example tbody tr:eq(0)')[0], ["insert date", 1, 2, 3 ... ]);
  339. */
  340. "fnRecalculateHeight": function ( nTr )
  341. {
  342. delete nTr._DTTC_iHeight;
  343. nTr.style.height = 'auto';
  344. },
  345. /**
  346. * Set the height of a given row - provides cross browser compatibility
  347. * @param {Node} nTarget TR element that should have it's height recalculated
  348. * @param {int} iHeight Height in pixels to set
  349. * @returns {void}
  350. * @example
  351. * var table = $('#example').dataTable( {
  352. * "scrollX": "100%"
  353. * } );
  354. * var fc = new $.fn.dataTable.fixedColumns( table );
  355. *
  356. * // You may want to do this after manipulating a row in the fixed column
  357. * fc.fnSetRowHeight( $('#example tbody tr:eq(0)')[0], 50 );
  358. */
  359. "fnSetRowHeight": function ( nTarget, iHeight )
  360. {
  361. nTarget.style.height = iHeight+"px";
  362. },
  363. /**
  364. * Get data index information about a row or cell in the table body.
  365. * This function is functionally identical to fnGetPosition in DataTables,
  366. * taking the same parameter (TH, TD or TR node) and returning exactly the
  367. * the same information (data index information). THe difference between
  368. * the two is that this method takes into account the fixed columns in the
  369. * table, so you can pass in nodes from the master table, or the cloned
  370. * tables and get the index position for the data in the main table.
  371. * @param {node} node TR, TH or TD element to get the information about
  372. * @returns {int} If nNode is given as a TR, then a single index is
  373. * returned, or if given as a cell, an array of [row index, column index
  374. * (visible), column index (all)] is given.
  375. */
  376. "fnGetPosition": function ( node )
  377. {
  378. var idx;
  379. var inst = this.s.dt.oInstance;
  380. if ( ! $(node).parents('.DTFC_Cloned').length )
  381. {
  382. // Not in a cloned table
  383. return inst.fnGetPosition( node );
  384. }
  385. else
  386. {
  387. // Its in the cloned table, so need to look up position
  388. if ( node.nodeName.toLowerCase() === 'tr' ) {
  389. idx = $(node).index();
  390. return inst.fnGetPosition( $('tr', this.s.dt.nTBody)[ idx ] );
  391. }
  392. else
  393. {
  394. var colIdx = $(node).index();
  395. idx = $(node.parentNode).index();
  396. var row = inst.fnGetPosition( $('tr', this.s.dt.nTBody)[ idx ] );
  397. return [
  398. row,
  399. colIdx,
  400. inst.oApi._fnVisibleToColumnIndex( this.s.dt, colIdx )
  401. ];
  402. }
  403. }
  404. },
  405. fnToFixedNode: function ( rowIdx, colIdx )
  406. {
  407. var found;
  408. if ( colIdx < this.s.iLeftColumns ) {
  409. found = $(this.dom.clone.left.body).find('[data-dt-row='+rowIdx+'][data-dt-column='+colIdx+']');
  410. }
  411. else if ( colIdx >= this.s.iRightColumns ) {
  412. found = $(this.dom.clone.right.body).find('[data-dt-row='+rowIdx+'][data-dt-column='+colIdx+']');
  413. }
  414. if ( found && found.length ) {
  415. return found[0];
  416. }
  417. // Fallback - non-fixed node
  418. var table = new $.fn.dataTable.Api(this.s.dt);
  419. return table.cell(rowIdx, colIdx).node();
  420. },
  421. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  422. * Private methods (they are of course public in JS, but recommended as private)
  423. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  424. /**
  425. * Initialisation for FixedColumns
  426. * @param {Object} oInit User settings for initialisation
  427. * @returns {void}
  428. * @private
  429. */
  430. "_fnConstruct": function ( oInit )
  431. {
  432. var i, iLen, iWidth,
  433. that = this;
  434. /* Sanity checking */
  435. if ( typeof this.s.dt.oInstance.fnVersionCheck != 'function' ||
  436. this.s.dt.oInstance.fnVersionCheck( '1.8.0' ) !== true )
  437. {
  438. alert( "FixedColumns "+FixedColumns.VERSION+" required DataTables 1.8.0 or later. "+
  439. "Please upgrade your DataTables installation" );
  440. return;
  441. }
  442. if ( this.s.dt.oScroll.sX === "" )
  443. {
  444. this.s.dt.oInstance.oApi._fnLog( this.s.dt, 1, "FixedColumns is not needed (no "+
  445. "x-scrolling in DataTables enabled), so no action will be taken. Use 'FixedHeader' for "+
  446. "column fixing when scrolling is not enabled" );
  447. return;
  448. }
  449. /* Apply the settings from the user / defaults */
  450. this.s = $.extend( true, this.s, FixedColumns.defaults, oInit );
  451. /* Set up the DOM as we need it and cache nodes */
  452. var classes = this.s.dt.oClasses;
  453. this.dom.grid.dt = $(this.s.dt.nTable).parents('div.'+classes.sScrollWrapper)[0];
  454. this.dom.scroller = $('div.'+classes.sScrollBody, this.dom.grid.dt )[0];
  455. /* Set up the DOM that we want for the fixed column layout grid */
  456. this._fnColCalc();
  457. this._fnGridSetup();
  458. /* Event handlers */
  459. var mouseController;
  460. var mouseDown = false;
  461. // When the mouse is down (drag scroll) the mouse controller cannot
  462. // change, as the browser keeps the original element as the scrolling one
  463. $(this.s.dt.nTableWrapper).on( 'mousedown.DTFC', function (e) {
  464. if ( e.button === 0 ) {
  465. mouseDown = true;
  466. $(document).one( 'mouseup', function () {
  467. mouseDown = false;
  468. } );
  469. }
  470. } );
  471. // When the body is scrolled - scroll the left and right columns
  472. $(this.dom.scroller)
  473. .on( 'mouseover.DTFC touchstart.DTFC', function () {
  474. if ( ! mouseDown ) {
  475. mouseController = 'main';
  476. }
  477. } )
  478. .on( 'scroll.DTFC', function (e) {
  479. if ( ! mouseController && e.originalEvent ) {
  480. mouseController = 'main';
  481. }
  482. if ( mouseController === 'main' ) {
  483. if ( that.s.iLeftColumns > 0 ) {
  484. that.dom.grid.left.liner.scrollTop = that.dom.scroller.scrollTop;
  485. }
  486. if ( that.s.iRightColumns > 0 ) {
  487. that.dom.grid.right.liner.scrollTop = that.dom.scroller.scrollTop;
  488. }
  489. }
  490. } );
  491. var wheelType = 'onwheel' in document.createElement('div') ?
  492. 'wheel.DTFC' :
  493. 'mousewheel.DTFC';
  494. if ( that.s.iLeftColumns > 0 ) {
  495. // When scrolling the left column, scroll the body and right column
  496. $(that.dom.grid.left.liner)
  497. .on( 'mouseover.DTFC touchstart.DTFC', function () {
  498. if ( ! mouseDown ) {
  499. mouseController = 'left';
  500. }
  501. } )
  502. .on( 'scroll.DTFC', function ( e ) {
  503. if ( ! mouseController && e.originalEvent ) {
  504. mouseController = 'left';
  505. }
  506. if ( mouseController === 'left' ) {
  507. that.dom.scroller.scrollTop = that.dom.grid.left.liner.scrollTop;
  508. if ( that.s.iRightColumns > 0 ) {
  509. that.dom.grid.right.liner.scrollTop = that.dom.grid.left.liner.scrollTop;
  510. }
  511. }
  512. } )
  513. .on( wheelType, function(e) {
  514. // Pass horizontal scrolling through
  515. var xDelta = e.type === 'wheel' ?
  516. -e.originalEvent.deltaX :
  517. e.originalEvent.wheelDeltaX;
  518. that.dom.scroller.scrollLeft -= xDelta;
  519. } );
  520. }
  521. if ( that.s.iRightColumns > 0 ) {
  522. // When scrolling the right column, scroll the body and the left column
  523. $(that.dom.grid.right.liner)
  524. .on( 'mouseover.DTFC touchstart.DTFC', function () {
  525. if ( ! mouseDown ) {
  526. mouseController = 'right';
  527. }
  528. } )
  529. .on( 'scroll.DTFC', function ( e ) {
  530. if ( ! mouseController && e.originalEvent ) {
  531. mouseController = 'right';
  532. }
  533. if ( mouseController === 'right' ) {
  534. that.dom.scroller.scrollTop = that.dom.grid.right.liner.scrollTop;
  535. if ( that.s.iLeftColumns > 0 ) {
  536. that.dom.grid.left.liner.scrollTop = that.dom.grid.right.liner.scrollTop;
  537. }
  538. }
  539. } )
  540. .on( wheelType, function(e) {
  541. // Pass horizontal scrolling through
  542. var xDelta = e.type === 'wheel' ?
  543. -e.originalEvent.deltaX :
  544. e.originalEvent.wheelDeltaX;
  545. that.dom.scroller.scrollLeft -= xDelta;
  546. } );
  547. }
  548. $(window).on( 'resize.DTFC', function () {
  549. that._fnGridLayout.call( that );
  550. } );
  551. var bFirstDraw = true;
  552. var jqTable = $(this.s.dt.nTable);
  553. jqTable
  554. .on( 'draw.dt.DTFC', function () {
  555. that._fnColCalc();
  556. that._fnDraw.call( that, bFirstDraw );
  557. bFirstDraw = false;
  558. } )
  559. .on( 'column-sizing.dt.DTFC', function () {
  560. that._fnColCalc();
  561. that._fnGridLayout( that );
  562. } )
  563. .on( 'column-visibility.dt.DTFC', function ( e, settings, column, vis, recalc ) {
  564. if ( recalc === undefined || recalc ) {
  565. that._fnColCalc();
  566. that._fnGridLayout( that );
  567. that._fnDraw( true );
  568. }
  569. } )
  570. .on( 'select.dt.DTFC deselect.dt.DTFC', function ( e, dt, type, indexes ) {
  571. if ( e.namespace === 'dt' ) {
  572. that._fnDraw( false );
  573. }
  574. } )
  575. .on( 'destroy.dt.DTFC', function () {
  576. jqTable.off( '.DTFC' );
  577. $(that.dom.scroller).off( '.DTFC' );
  578. $(window).off( '.DTFC' );
  579. $(that.s.dt.nTableWrapper).off( '.DTFC' );
  580. $(that.dom.grid.left.liner).off( '.DTFC '+wheelType );
  581. $(that.dom.grid.left.wrapper).remove();
  582. $(that.dom.grid.right.liner).off( '.DTFC '+wheelType );
  583. $(that.dom.grid.right.wrapper).remove();
  584. } );
  585. /* Get things right to start with - note that due to adjusting the columns, there must be
  586. * another redraw of the main table. It doesn't need to be a full redraw however.
  587. */
  588. this._fnGridLayout();
  589. this.s.dt.oInstance.fnDraw(false);
  590. },
  591. /**
  592. * Calculate the column widths for the grid layout
  593. * @returns {void}
  594. * @private
  595. */
  596. "_fnColCalc": function ()
  597. {
  598. var that = this;
  599. var iLeftWidth = 0;
  600. var iRightWidth = 0;
  601. this.s.aiInnerWidths = [];
  602. this.s.aiOuterWidths = [];
  603. $.each( this.s.dt.aoColumns, function (i, col) {
  604. var th = $(col.nTh);
  605. var border;
  606. if ( ! th.filter(':visible').length ) {
  607. that.s.aiInnerWidths.push( 0 );
  608. that.s.aiOuterWidths.push( 0 );
  609. }
  610. else
  611. {
  612. // Inner width is used to assign widths to cells
  613. // Outer width is used to calculate the container
  614. var iWidth = th.outerWidth();
  615. // When working with the left most-cell, need to add on the
  616. // table's border to the outerWidth, since we need to take
  617. // account of it, but it isn't in any cell
  618. if ( that.s.aiOuterWidths.length === 0 ) {
  619. border = $(that.s.dt.nTable).css('border-left-width');
  620. iWidth += typeof border === 'string' && border.indexOf('px') === -1 ?
  621. 1 :
  622. parseInt( border, 10 );
  623. }
  624. // Likewise with the final column on the right
  625. if ( that.s.aiOuterWidths.length === that.s.dt.aoColumns.length-1 ) {
  626. border = $(that.s.dt.nTable).css('border-right-width');
  627. iWidth += typeof border === 'string' && border.indexOf('px') === -1 ?
  628. 1 :
  629. parseInt( border, 10 );
  630. }
  631. that.s.aiOuterWidths.push( iWidth );
  632. that.s.aiInnerWidths.push( th.width() );
  633. if ( i < that.s.iLeftColumns )
  634. {
  635. iLeftWidth += iWidth;
  636. }
  637. if ( that.s.iTableColumns-that.s.iRightColumns <= i )
  638. {
  639. iRightWidth += iWidth;
  640. }
  641. }
  642. } );
  643. this.s.iLeftWidth = iLeftWidth;
  644. this.s.iRightWidth = iRightWidth;
  645. },
  646. /**
  647. * Set up the DOM for the fixed column. The way the layout works is to create a 1x3 grid
  648. * for the left column, the DataTable (for which we just reuse the scrolling element DataTable
  649. * puts into the DOM) and the right column. In each of he two fixed column elements there is a
  650. * grouping wrapper element and then a head, body and footer wrapper. In each of these we then
  651. * place the cloned header, body or footer tables. This effectively gives as 3x3 grid structure.
  652. * @returns {void}
  653. * @private
  654. */
  655. "_fnGridSetup": function ()
  656. {
  657. var that = this;
  658. var oOverflow = this._fnDTOverflow();
  659. var block;
  660. this.dom.body = this.s.dt.nTable;
  661. this.dom.header = this.s.dt.nTHead.parentNode;
  662. this.dom.header.parentNode.parentNode.style.position = "relative";
  663. var nSWrapper =
  664. $('<div class="DTFC_ScrollWrapper" style="position:relative; clear:both;">'+
  665. '<div class="DTFC_LeftWrapper" style="position:absolute; top:0; left:0;" aria-hidden="true">'+
  666. '<div class="DTFC_LeftHeadWrapper" style="position:relative; top:0; left:0; overflow:hidden;"></div>'+
  667. '<div class="DTFC_LeftBodyWrapper" style="position:relative; top:0; left:0; height:0; overflow:hidden;">'+
  668. '<div class="DTFC_LeftBodyLiner" style="position:relative; top:0; left:0; overflow-y:scroll;"></div>'+
  669. '</div>'+
  670. '<div class="DTFC_LeftFootWrapper" style="position:relative; top:0; left:0; overflow:hidden;"></div>'+
  671. '</div>'+
  672. '<div class="DTFC_RightWrapper" style="position:absolute; top:0; right:0;" aria-hidden="true">'+
  673. '<div class="DTFC_RightHeadWrapper" style="position:relative; top:0; left:0;">'+
  674. '<div class="DTFC_RightHeadBlocker DTFC_Blocker" style="position:absolute; top:0; bottom:0;"></div>'+
  675. '</div>'+
  676. '<div class="DTFC_RightBodyWrapper" style="position:relative; top:0; left:0; height:0; overflow:hidden;">'+
  677. '<div class="DTFC_RightBodyLiner" style="position:relative; top:0; left:0; overflow-y:scroll;"></div>'+
  678. '</div>'+
  679. '<div class="DTFC_RightFootWrapper" style="position:relative; top:0; left:0;">'+
  680. '<div class="DTFC_RightFootBlocker DTFC_Blocker" style="position:absolute; top:0; bottom:0;"></div>'+
  681. '</div>'+
  682. '</div>'+
  683. '</div>')[0];
  684. var nLeft = nSWrapper.childNodes[0];
  685. var nRight = nSWrapper.childNodes[1];
  686. this.dom.grid.dt.parentNode.insertBefore( nSWrapper, this.dom.grid.dt );
  687. nSWrapper.appendChild( this.dom.grid.dt );
  688. this.dom.grid.wrapper = nSWrapper;
  689. if ( this.s.iLeftColumns > 0 )
  690. {
  691. this.dom.grid.left.wrapper = nLeft;
  692. this.dom.grid.left.head = nLeft.childNodes[0];
  693. this.dom.grid.left.body = nLeft.childNodes[1];
  694. this.dom.grid.left.liner = $('div.DTFC_LeftBodyLiner', nSWrapper)[0];
  695. nSWrapper.appendChild( nLeft );
  696. }
  697. if ( this.s.iRightColumns > 0 )
  698. {
  699. this.dom.grid.right.wrapper = nRight;
  700. this.dom.grid.right.head = nRight.childNodes[0];
  701. this.dom.grid.right.body = nRight.childNodes[1];
  702. this.dom.grid.right.liner = $('div.DTFC_RightBodyLiner', nSWrapper)[0];
  703. nRight.style.right = oOverflow.bar+"px";
  704. block = $('div.DTFC_RightHeadBlocker', nSWrapper)[0];
  705. block.style.width = oOverflow.bar+"px";
  706. block.style.right = -oOverflow.bar+"px";
  707. this.dom.grid.right.headBlock = block;
  708. block = $('div.DTFC_RightFootBlocker', nSWrapper)[0];
  709. block.style.width = oOverflow.bar+"px";
  710. block.style.right = -oOverflow.bar+"px";
  711. this.dom.grid.right.footBlock = block;
  712. nSWrapper.appendChild( nRight );
  713. }
  714. if ( this.s.dt.nTFoot )
  715. {
  716. this.dom.footer = this.s.dt.nTFoot.parentNode;
  717. if ( this.s.iLeftColumns > 0 )
  718. {
  719. this.dom.grid.left.foot = nLeft.childNodes[2];
  720. }
  721. if ( this.s.iRightColumns > 0 )
  722. {
  723. this.dom.grid.right.foot = nRight.childNodes[2];
  724. }
  725. }
  726. // RTL support - swap the position of the left and right columns (#48)
  727. if ( this.s.rtl ) {
  728. $('div.DTFC_RightHeadBlocker', nSWrapper).css( {
  729. left: -oOverflow.bar+'px',
  730. right: ''
  731. } );
  732. }
  733. },
  734. /**
  735. * Style and position the grid used for the FixedColumns layout
  736. * @returns {void}
  737. * @private
  738. */
  739. "_fnGridLayout": function ()
  740. {
  741. var that = this;
  742. var oGrid = this.dom.grid;
  743. var iWidth = $(oGrid.wrapper).width();
  744. var iBodyHeight = this.s.dt.nTable.parentNode.offsetHeight;
  745. var iFullHeight = this.s.dt.nTable.parentNode.parentNode.offsetHeight;
  746. var oOverflow = this._fnDTOverflow();
  747. var iLeftWidth = this.s.iLeftWidth;
  748. var iRightWidth = this.s.iRightWidth;
  749. var rtl = $(this.dom.body).css('direction') === 'rtl';
  750. var wrapper;
  751. var scrollbarAdjust = function ( node, width ) {
  752. if ( ! oOverflow.bar ) {
  753. // If there is no scrollbar (Macs) we need to hide the auto scrollbar
  754. node.style.width = (width+20)+"px";
  755. node.style.paddingRight = "20px";
  756. node.style.boxSizing = "border-box";
  757. }
  758. else if ( that._firefoxScrollError() ) {
  759. // See the above function for why this is required
  760. if ( $(node).height() > 34 ) {
  761. node.style.width = (width+oOverflow.bar)+"px";
  762. }
  763. }
  764. else {
  765. // Otherwise just overflow by the scrollbar
  766. node.style.width = (width+oOverflow.bar)+"px";
  767. }
  768. };
  769. // When x scrolling - don't paint the fixed columns over the x scrollbar
  770. if ( oOverflow.x )
  771. {
  772. iBodyHeight -= oOverflow.bar;
  773. }
  774. oGrid.wrapper.style.height = iFullHeight+"px";
  775. if ( this.s.iLeftColumns > 0 )
  776. {
  777. wrapper = oGrid.left.wrapper;
  778. wrapper.style.width = iLeftWidth+'px';
  779. wrapper.style.height = '1px';
  780. // Swap the position of the left and right columns for rtl (#48)
  781. // This is always up against the edge, scrollbar on the far side
  782. if ( rtl ) {
  783. wrapper.style.left = '';
  784. wrapper.style.right = 0;
  785. }
  786. else {
  787. wrapper.style.left = 0;
  788. wrapper.style.right = '';
  789. }
  790. oGrid.left.body.style.height = iBodyHeight+"px";
  791. if ( oGrid.left.foot ) {
  792. oGrid.left.foot.style.top = (oOverflow.x ? oOverflow.bar : 0)+"px"; // shift footer for scrollbar
  793. }
  794. scrollbarAdjust( oGrid.left.liner, iLeftWidth );
  795. oGrid.left.liner.style.height = iBodyHeight+"px";
  796. oGrid.left.liner.style.maxHeight = iBodyHeight+"px";
  797. }
  798. if ( this.s.iRightColumns > 0 )
  799. {
  800. wrapper = oGrid.right.wrapper;
  801. wrapper.style.width = iRightWidth+'px';
  802. wrapper.style.height = '1px';
  803. // Need to take account of the vertical scrollbar
  804. if ( this.s.rtl ) {
  805. wrapper.style.left = oOverflow.y ? oOverflow.bar+'px' : 0;
  806. wrapper.style.right = '';
  807. }
  808. else {
  809. wrapper.style.left = '';
  810. wrapper.style.right = oOverflow.y ? oOverflow.bar+'px' : 0;
  811. }
  812. oGrid.right.body.style.height = iBodyHeight+"px";
  813. if ( oGrid.right.foot ) {
  814. oGrid.right.foot.style.top = (oOverflow.x ? oOverflow.bar : 0)+"px";
  815. }
  816. scrollbarAdjust( oGrid.right.liner, iRightWidth );
  817. oGrid.right.liner.style.height = iBodyHeight+"px";
  818. oGrid.right.liner.style.maxHeight = iBodyHeight+"px";
  819. oGrid.right.headBlock.style.display = oOverflow.y ? 'block' : 'none';
  820. oGrid.right.footBlock.style.display = oOverflow.y ? 'block' : 'none';
  821. }
  822. },
  823. /**
  824. * Get information about the DataTable's scrolling state - specifically if the table is scrolling
  825. * on either the x or y axis, and also the scrollbar width.
  826. * @returns {object} Information about the DataTables scrolling state with the properties:
  827. * 'x', 'y' and 'bar'
  828. * @private
  829. */
  830. "_fnDTOverflow": function ()
  831. {
  832. var nTable = this.s.dt.nTable;
  833. var nTableScrollBody = nTable.parentNode;
  834. var out = {
  835. "x": false,
  836. "y": false,
  837. "bar": this.s.dt.oScroll.iBarWidth
  838. };
  839. if ( nTable.offsetWidth > nTableScrollBody.clientWidth )
  840. {
  841. out.x = true;
  842. }
  843. if ( nTable.offsetHeight > nTableScrollBody.clientHeight )
  844. {
  845. out.y = true;
  846. }
  847. return out;
  848. },
  849. /**
  850. * Clone and position the fixed columns
  851. * @returns {void}
  852. * @param {Boolean} bAll Indicate if the header and footer should be updated as well (true)
  853. * @private
  854. */
  855. "_fnDraw": function ( bAll )
  856. {
  857. this._fnGridLayout();
  858. this._fnCloneLeft( bAll );
  859. this._fnCloneRight( bAll );
  860. /* Draw callback function */
  861. if ( this.s.fnDrawCallback !== null )
  862. {
  863. this.s.fnDrawCallback.call( this, this.dom.clone.left, this.dom.clone.right );
  864. }
  865. /* Event triggering */
  866. $(this).trigger( 'draw.dtfc', {
  867. "leftClone": this.dom.clone.left,
  868. "rightClone": this.dom.clone.right
  869. } );
  870. },
  871. /**
  872. * Clone the right columns
  873. * @returns {void}
  874. * @param {Boolean} bAll Indicate if the header and footer should be updated as well (true)
  875. * @private
  876. */
  877. "_fnCloneRight": function ( bAll )
  878. {
  879. if ( this.s.iRightColumns <= 0 ) {
  880. return;
  881. }
  882. var that = this,
  883. i, jq,
  884. aiColumns = [];
  885. for ( i=this.s.iTableColumns-this.s.iRightColumns ; i<this.s.iTableColumns ; i++ ) {
  886. if ( this.s.dt.aoColumns[i].bVisible ) {
  887. aiColumns.push( i );
  888. }
  889. }
  890. this._fnClone( this.dom.clone.right, this.dom.grid.right, aiColumns, bAll );
  891. },
  892. /**
  893. * Clone the left columns
  894. * @returns {void}
  895. * @param {Boolean} bAll Indicate if the header and footer should be updated as well (true)
  896. * @private
  897. */
  898. "_fnCloneLeft": function ( bAll )
  899. {
  900. if ( this.s.iLeftColumns <= 0 ) {
  901. return;
  902. }
  903. var that = this,
  904. i, jq,
  905. aiColumns = [];
  906. for ( i=0 ; i<this.s.iLeftColumns ; i++ ) {
  907. if ( this.s.dt.aoColumns[i].bVisible ) {
  908. aiColumns.push( i );
  909. }
  910. }
  911. this._fnClone( this.dom.clone.left, this.dom.grid.left, aiColumns, bAll );
  912. },
  913. /**
  914. * Make a copy of the layout object for a header or footer element from DataTables. Note that
  915. * this method will clone the nodes in the layout object.
  916. * @returns {Array} Copy of the layout array
  917. * @param {Object} aoOriginal Layout array from DataTables (aoHeader or aoFooter)
  918. * @param {Object} aiColumns Columns to copy
  919. * @param {boolean} events Copy cell events or not
  920. * @private
  921. */
  922. "_fnCopyLayout": function ( aoOriginal, aiColumns, events )
  923. {
  924. var aReturn = [];
  925. var aClones = [];
  926. var aCloned = [];
  927. for ( var i=0, iLen=aoOriginal.length ; i<iLen ; i++ )
  928. {
  929. var aRow = [];
  930. aRow.nTr = $(aoOriginal[i].nTr).clone(events, false)[0];
  931. for ( var j=0, jLen=this.s.iTableColumns ; j<jLen ; j++ )
  932. {
  933. if ( $.inArray( j, aiColumns ) === -1 )
  934. {
  935. continue;
  936. }
  937. var iCloned = $.inArray( aoOriginal[i][j].cell, aCloned );
  938. if ( iCloned === -1 )
  939. {
  940. var nClone = $(aoOriginal[i][j].cell).clone(events, false)[0];
  941. aClones.push( nClone );
  942. aCloned.push( aoOriginal[i][j].cell );
  943. aRow.push( {
  944. "cell": nClone,
  945. "unique": aoOriginal[i][j].unique
  946. } );
  947. }
  948. else
  949. {
  950. aRow.push( {
  951. "cell": aClones[ iCloned ],
  952. "unique": aoOriginal[i][j].unique
  953. } );
  954. }
  955. }
  956. aReturn.push( aRow );
  957. }
  958. return aReturn;
  959. },
  960. /**
  961. * Clone the DataTable nodes and place them in the DOM (sized correctly)
  962. * @returns {void}
  963. * @param {Object} oClone Object containing the header, footer and body cloned DOM elements
  964. * @param {Object} oGrid Grid object containing the display grid elements for the cloned
  965. * column (left or right)
  966. * @param {Array} aiColumns Column indexes which should be operated on from the DataTable
  967. * @param {Boolean} bAll Indicate if the header and footer should be updated as well (true)
  968. * @private
  969. */
  970. "_fnClone": function ( oClone, oGrid, aiColumns, bAll )
  971. {
  972. var that = this,
  973. i, iLen, j, jLen, jq, nTarget, iColumn, nClone, iIndex, aoCloneLayout,
  974. jqCloneThead, aoFixedHeader,
  975. dt = this.s.dt;
  976. /*
  977. * Header
  978. */
  979. if ( bAll )
  980. {
  981. $(oClone.header).remove();
  982. oClone.header = $(this.dom.header).clone(true, false)[0];
  983. oClone.header.className += " DTFC_Cloned";
  984. oClone.header.style.width = "100%";
  985. oGrid.head.appendChild( oClone.header );
  986. /* Copy the DataTables layout cache for the header for our floating column */
  987. aoCloneLayout = this._fnCopyLayout( dt.aoHeader, aiColumns, true );
  988. jqCloneThead = $('>thead', oClone.header);
  989. jqCloneThead.empty();
  990. /* Add the created cloned TR elements to the table */
  991. for ( i=0, iLen=aoCloneLayout.length ; i<iLen ; i++ )
  992. {
  993. jqCloneThead[0].appendChild( aoCloneLayout[i].nTr );
  994. }
  995. /* Use the handy _fnDrawHead function in DataTables to do the rowspan/colspan
  996. * calculations for us
  997. */
  998. dt.oApi._fnDrawHead( dt, aoCloneLayout, true );
  999. }
  1000. else
  1001. {
  1002. /* To ensure that we copy cell classes exactly, regardless of colspan, multiple rows
  1003. * etc, we make a copy of the header from the DataTable again, but don't insert the
  1004. * cloned cells, just copy the classes across. To get the matching layout for the
  1005. * fixed component, we use the DataTables _fnDetectHeader method, allowing 1:1 mapping
  1006. */
  1007. aoCloneLayout = this._fnCopyLayout( dt.aoHeader, aiColumns, false );
  1008. aoFixedHeader=[];
  1009. dt.oApi._fnDetectHeader( aoFixedHeader, $('>thead', oClone.header)[0] );
  1010. for ( i=0, iLen=aoCloneLayout.length ; i<iLen ; i++ )
  1011. {
  1012. for ( j=0, jLen=aoCloneLayout[i].length ; j<jLen ; j++ )
  1013. {
  1014. aoFixedHeader[i][j].cell.className = aoCloneLayout[i][j].cell.className;
  1015. // If jQuery UI theming is used we need to copy those elements as well
  1016. $('span.DataTables_sort_icon', aoFixedHeader[i][j].cell).each( function () {
  1017. this.className = $('span.DataTables_sort_icon', aoCloneLayout[i][j].cell)[0].className;
  1018. } );
  1019. }
  1020. }
  1021. }
  1022. this._fnEqualiseHeights( 'thead', this.dom.header, oClone.header );
  1023. /*
  1024. * Body
  1025. */
  1026. if ( this.s.sHeightMatch == 'auto' )
  1027. {
  1028. /* Remove any heights which have been applied already and let the browser figure it out */
  1029. $('>tbody>tr', that.dom.body).css('height', 'auto');
  1030. }
  1031. if ( oClone.body !== null )
  1032. {
  1033. $(oClone.body).remove();
  1034. oClone.body = null;
  1035. }
  1036. oClone.body = $(this.dom.body).clone(true)[0];
  1037. oClone.body.className += " DTFC_Cloned";
  1038. oClone.body.style.paddingBottom = dt.oScroll.iBarWidth+"px";
  1039. oClone.body.style.marginBottom = (dt.oScroll.iBarWidth*2)+"px"; /* For IE */
  1040. if ( oClone.body.getAttribute('id') !== null )
  1041. {
  1042. oClone.body.removeAttribute('id');
  1043. }
  1044. $('>thead>tr', oClone.body).empty();
  1045. $('>tfoot', oClone.body).remove();
  1046. var nBody = $('tbody', oClone.body)[0];
  1047. $(nBody).empty();
  1048. if ( dt.aiDisplay.length > 0 )
  1049. {
  1050. /* Copy the DataTables' header elements to force the column width in exactly the
  1051. * same way that DataTables does it - have the header element, apply the width and
  1052. * colapse it down
  1053. */
  1054. var nInnerThead = $('>thead>tr', oClone.body)[0];
  1055. for ( iIndex=0 ; iIndex<aiColumns.length ; iIndex++ )
  1056. {
  1057. iColumn = aiColumns[iIndex];
  1058. nClone = $(dt.aoColumns[iColumn].nTh).clone(true)[0];
  1059. nClone.innerHTML = "";
  1060. var oStyle = nClone.style;
  1061. oStyle.paddingTop = "0";
  1062. oStyle.paddingBottom = "0";
  1063. oStyle.borderTopWidth = "0";
  1064. oStyle.borderBottomWidth = "0";
  1065. oStyle.height = 0;
  1066. oStyle.width = that.s.aiInnerWidths[iColumn]+"px";
  1067. nInnerThead.appendChild( nClone );
  1068. }
  1069. /* Add in the tbody elements, cloning form the master table */
  1070. $('>tbody>tr', that.dom.body).each( function (z) {
  1071. var i = that.s.dt.oFeatures.bServerSide===false ?
  1072. that.s.dt.aiDisplay[ that.s.dt._iDisplayStart+z ] : z;
  1073. var aTds = that.s.dt.aoData[ i ].anCells || $(this).children('td, th');
  1074. var n = this.cloneNode(false);
  1075. n.removeAttribute('id');
  1076. n.setAttribute( 'data-dt-row', i );
  1077. for ( iIndex=0 ; iIndex<aiColumns.length ; iIndex++ )
  1078. {
  1079. iColumn = aiColumns[iIndex];
  1080. if ( aTds.length > 0 )
  1081. {
  1082. nClone = $( aTds[iColumn] ).clone(true, true)[0];
  1083. nClone.removeAttribute( 'id' );
  1084. nClone.setAttribute( 'data-dt-row', i );
  1085. nClone.setAttribute( 'data-dt-column', iColumn );
  1086. n.appendChild( nClone );
  1087. }
  1088. }
  1089. nBody.appendChild( n );
  1090. } );
  1091. }
  1092. else
  1093. {
  1094. $('>tbody>tr', that.dom.body).each( function (z) {
  1095. nClone = this.cloneNode(true);
  1096. nClone.className += ' DTFC_NoData';
  1097. $('td', nClone).html('');
  1098. nBody.appendChild( nClone );
  1099. } );
  1100. }
  1101. oClone.body.style.width = "100%";
  1102. oClone.body.style.margin = "0";
  1103. oClone.body.style.padding = "0";
  1104. // Interop with Scroller - need to use a height forcing element in the
  1105. // scrolling area in the same way that Scroller does in the body scroll.
  1106. if ( dt.oScroller !== undefined )
  1107. {
  1108. var scrollerForcer = dt.oScroller.dom.force;
  1109. if ( ! oGrid.forcer ) {
  1110. oGrid.forcer = scrollerForcer.cloneNode( true );
  1111. oGrid.liner.appendChild( oGrid.forcer );
  1112. }
  1113. else {
  1114. oGrid.forcer.style.height = scrollerForcer.style.height;
  1115. }
  1116. }
  1117. oGrid.liner.appendChild( oClone.body );
  1118. this._fnEqualiseHeights( 'tbody', that.dom.body, oClone.body );
  1119. /*
  1120. * Footer
  1121. */
  1122. if ( dt.nTFoot !== null )
  1123. {
  1124. if ( bAll )
  1125. {
  1126. if ( oClone.footer !== null )
  1127. {
  1128. oClone.footer.parentNode.removeChild( oClone.footer );
  1129. }
  1130. oClone.footer = $(this.dom.footer).clone(true, true)[0];
  1131. oClone.footer.className += " DTFC_Cloned";
  1132. oClone.footer.style.width = "100%";
  1133. oGrid.foot.appendChild( oClone.footer );
  1134. /* Copy the footer just like we do for the header */
  1135. aoCloneLayout = this._fnCopyLayout( dt.aoFooter, aiColumns, true );
  1136. var jqCloneTfoot = $('>tfoot', oClone.footer);
  1137. jqCloneTfoot.empty();
  1138. for ( i=0, iLen=aoCloneLayout.length ; i<iLen ; i++ )
  1139. {
  1140. jqCloneTfoot[0].appendChild( aoCloneLayout[i].nTr );
  1141. }
  1142. dt.oApi._fnDrawHead( dt, aoCloneLayout, true );
  1143. }
  1144. else
  1145. {
  1146. aoCloneLayout = this._fnCopyLayout( dt.aoFooter, aiColumns, false );
  1147. var aoCurrFooter=[];
  1148. dt.oApi._fnDetectHeader( aoCurrFooter, $('>tfoot', oClone.footer)[0] );
  1149. for ( i=0, iLen=aoCloneLayout.length ; i<iLen ; i++ )
  1150. {
  1151. for ( j=0, jLen=aoCloneLayout[i].length ; j<jLen ; j++ )
  1152. {
  1153. aoCurrFooter[i][j].cell.className = aoCloneLayout[i][j].cell.className;
  1154. }
  1155. }
  1156. }
  1157. this._fnEqualiseHeights( 'tfoot', this.dom.footer, oClone.footer );
  1158. }
  1159. /* Equalise the column widths between the header footer and body - body get's priority */
  1160. var anUnique = dt.oApi._fnGetUniqueThs( dt, $('>thead', oClone.header)[0] );
  1161. $(anUnique).each( function (i) {
  1162. iColumn = aiColumns[i];
  1163. this.style.width = that.s.aiInnerWidths[iColumn]+"px";
  1164. } );
  1165. if ( that.s.dt.nTFoot !== null )
  1166. {
  1167. anUnique = dt.oApi._fnGetUniqueThs( dt, $('>tfoot', oClone.footer)[0] );
  1168. $(anUnique).each( function (i) {
  1169. iColumn = aiColumns[i];
  1170. this.style.width = that.s.aiInnerWidths[iColumn]+"px";
  1171. } );
  1172. }
  1173. },
  1174. /**
  1175. * From a given table node (THEAD etc), get a list of TR direct child elements
  1176. * @param {Node} nIn Table element to search for TR elements (THEAD, TBODY or TFOOT element)
  1177. * @returns {Array} List of TR elements found
  1178. * @private
  1179. */
  1180. "_fnGetTrNodes": function ( nIn )
  1181. {
  1182. var aOut = [];
  1183. for ( var i=0, iLen=nIn.childNodes.length ; i<iLen ; i++ )
  1184. {
  1185. if ( nIn.childNodes[i].nodeName.toUpperCase() == "TR" )
  1186. {
  1187. aOut.push( nIn.childNodes[i] );
  1188. }
  1189. }
  1190. return aOut;
  1191. },
  1192. /**
  1193. * Equalise the heights of the rows in a given table node in a cross browser way
  1194. * @returns {void}
  1195. * @param {String} nodeName Node type - thead, tbody or tfoot
  1196. * @param {Node} original Original node to take the heights from
  1197. * @param {Node} clone Copy the heights to
  1198. * @private
  1199. */
  1200. "_fnEqualiseHeights": function ( nodeName, original, clone )
  1201. {
  1202. if ( this.s.sHeightMatch == 'none' && nodeName !== 'thead' && nodeName !== 'tfoot' )
  1203. {
  1204. return;
  1205. }
  1206. var that = this,
  1207. i, iLen, iHeight, iHeight2, iHeightOriginal, iHeightClone,
  1208. rootOriginal = original.getElementsByTagName(nodeName)[0],
  1209. rootClone = clone.getElementsByTagName(nodeName)[0],
  1210. jqBoxHack = $('>'+nodeName+'>tr:eq(0)', original).children(':first'),
  1211. iBoxHack = jqBoxHack.outerHeight() - jqBoxHack.height(),
  1212. anOriginal = this._fnGetTrNodes( rootOriginal ),
  1213. anClone = this._fnGetTrNodes( rootClone ),
  1214. heights = [];
  1215. for ( i=0, iLen=anClone.length ; i<iLen ; i++ )
  1216. {
  1217. iHeightOriginal = anOriginal[i].offsetHeight;
  1218. iHeightClone = anClone[i].offsetHeight;
  1219. iHeight = iHeightClone > iHeightOriginal ? iHeightClone : iHeightOriginal;
  1220. if ( this.s.sHeightMatch == 'semiauto' )
  1221. {
  1222. anOriginal[i]._DTTC_iHeight = iHeight;
  1223. }
  1224. heights.push( iHeight );
  1225. }
  1226. for ( i=0, iLen=anClone.length ; i<iLen ; i++ )
  1227. {
  1228. anClone[i].style.height = heights[i]+"px";
  1229. anOriginal[i].style.height = heights[i]+"px";
  1230. }
  1231. },
  1232. /**
  1233. * Determine if the UA suffers from Firefox's overflow:scroll scrollbars
  1234. * not being shown bug.
  1235. *
  1236. * Firefox doesn't draw scrollbars, even if it is told to using
  1237. * overflow:scroll, if the div is less than 34px height. See bugs 292284 and
  1238. * 781885. Using UA detection here since this is particularly hard to detect
  1239. * using objects - its a straight up rendering error in Firefox.
  1240. *
  1241. * @return {boolean} True if Firefox error is present, false otherwise
  1242. */
  1243. _firefoxScrollError: function () {
  1244. if ( _firefoxScroll === undefined ) {
  1245. var test = $('<div/>')
  1246. .css( {
  1247. position: 'absolute',
  1248. top: 0,
  1249. left: 0,
  1250. height: 10,
  1251. width: 50,
  1252. overflow: 'scroll'
  1253. } )
  1254. .appendTo( 'body' );
  1255. // Make sure this doesn't apply on Macs with 0 width scrollbars
  1256. _firefoxScroll = (
  1257. test[0].clientWidth === test[0].offsetWidth && this._fnDTOverflow().bar !== 0
  1258. );
  1259. test.remove();
  1260. }
  1261. return _firefoxScroll;
  1262. }
  1263. } );
  1264. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  1265. * Statics
  1266. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  1267. /**
  1268. * FixedColumns default settings for initialisation
  1269. * @name FixedColumns.defaults
  1270. * @namespace
  1271. * @static
  1272. */
  1273. FixedColumns.defaults = /** @lends FixedColumns.defaults */{
  1274. /**
  1275. * Number of left hand columns to fix in position
  1276. * @type int
  1277. * @default 1
  1278. * @static
  1279. * @example
  1280. * var = $('#example').dataTable( {
  1281. * "scrollX": "100%"
  1282. * } );
  1283. * new $.fn.dataTable.fixedColumns( table, {
  1284. * "leftColumns": 2
  1285. * } );
  1286. */
  1287. "iLeftColumns": 1,
  1288. /**
  1289. * Number of right hand columns to fix in position
  1290. * @type int
  1291. * @default 0
  1292. * @static
  1293. * @example
  1294. * var table = $('#example').dataTable( {
  1295. * "scrollX": "100%"
  1296. * } );
  1297. * new $.fn.dataTable.fixedColumns( table, {
  1298. * "rightColumns": 1
  1299. * } );
  1300. */
  1301. "iRightColumns": 0,
  1302. /**
  1303. * Draw callback function which is called when FixedColumns has redrawn the fixed assets
  1304. * @type function(object, object):void
  1305. * @default null
  1306. * @static
  1307. * @example
  1308. * var table = $('#example').dataTable( {
  1309. * "scrollX": "100%"
  1310. * } );
  1311. * new $.fn.dataTable.fixedColumns( table, {
  1312. * "drawCallback": function () {
  1313. * alert( "FixedColumns redraw" );
  1314. * }
  1315. * } );
  1316. */
  1317. "fnDrawCallback": null,
  1318. /**
  1319. * Height matching algorthim to use. This can be "none" which will result in no height
  1320. * matching being applied by FixedColumns (height matching could be forced by CSS in this
  1321. * case), "semiauto" whereby the height calculation will be performed once, and the result
  1322. * cached to be used again (fnRecalculateHeight can be used to force recalculation), or
  1323. * "auto" when height matching is performed on every draw (slowest but must accurate)
  1324. * @type string
  1325. * @default semiauto
  1326. * @static
  1327. * @example
  1328. * var table = $('#example').dataTable( {
  1329. * "scrollX": "100%"
  1330. * } );
  1331. * new $.fn.dataTable.fixedColumns( table, {
  1332. * "heightMatch": "auto"
  1333. * } );
  1334. */
  1335. "sHeightMatch": "semiauto"
  1336. };
  1337. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  1338. * Constants
  1339. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  1340. /**
  1341. * FixedColumns version
  1342. * @name FixedColumns.version
  1343. * @type String
  1344. * @default See code
  1345. * @static
  1346. */
  1347. FixedColumns.version = "3.8.0";
  1348. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  1349. * DataTables API integration
  1350. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  1351. DataTable.Api.register( 'fixedColumns()', function () {
  1352. return this;
  1353. } );
  1354. DataTable.Api.register( 'fixedColumns().update()', function () {
  1355. return this.iterator( 'table', function ( ctx ) {
  1356. if ( ctx._oFixedColumns ) {
  1357. ctx._oFixedColumns.fnUpdate();
  1358. }
  1359. } );
  1360. } );
  1361. DataTable.Api.register( 'fixedColumns().relayout()', function () {
  1362. return this.iterator( 'table', function ( ctx ) {
  1363. if ( ctx._oFixedColumns ) {
  1364. ctx._oFixedColumns.fnRedrawLayout();
  1365. }
  1366. } );
  1367. } );
  1368. DataTable.Api.register( 'rows().recalcHeight()', function () {
  1369. return this.iterator( 'row', function ( ctx, idx ) {
  1370. if ( ctx._oFixedColumns ) {
  1371. ctx._oFixedColumns.fnRecalculateHeight( this.row(idx).node() );
  1372. }
  1373. } );
  1374. } );
  1375. DataTable.Api.register( 'fixedColumns().rowIndex()', function ( row ) {
  1376. row = $(row);
  1377. return row.parents('.DTFC_Cloned').length ?
  1378. this.rows( { page: 'current' } ).indexes()[ row.index() ] :
  1379. this.row( row ).index();
  1380. } );
  1381. DataTable.Api.register( 'fixedColumns().cellIndex()', function ( cell ) {
  1382. cell = $(cell);
  1383. if ( cell.parents('.DTFC_Cloned').length ) {
  1384. var rowClonedIdx = cell.parent().index();
  1385. var rowIdx = this.rows( { page: 'current' } ).indexes()[ rowClonedIdx ];
  1386. var columnIdx;
  1387. if ( cell.parents('.DTFC_LeftWrapper').length ) {
  1388. columnIdx = cell.index();
  1389. }
  1390. else {
  1391. var columns = this.columns().flatten().length;
  1392. columnIdx = columns - this.context[0]._oFixedColumns.s.iRightColumns + cell.index();
  1393. }
  1394. return {
  1395. row: rowIdx,
  1396. column: this.column.index( 'toData', columnIdx ),
  1397. columnVisible: columnIdx
  1398. };
  1399. }
  1400. else {
  1401. return this.cell( cell ).index();
  1402. }
  1403. } );
  1404. DataTable.Api.registerPlural( 'cells().fixedNodes()', 'cell().fixedNode()', function () {
  1405. return this.iterator( 'cell', function ( settings, row, column ) {
  1406. return settings._oFixedColumns
  1407. ? settings._oFixedColumns.fnToFixedNode( row, column )
  1408. : this.node();
  1409. }, 1 );
  1410. } );
  1411. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  1412. * Initialisation
  1413. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  1414. // Attach a listener to the document which listens for DataTables initialisation
  1415. // events so we can automatically initialise
  1416. $(document).on( 'init.dt.fixedColumns', function (e, settings) {
  1417. if ( e.namespace !== 'dt' ) {
  1418. return;
  1419. }
  1420. var init = settings.oInit.fixedColumns;
  1421. var defaults = DataTable.defaults.fixedColumns;
  1422. if ( init || defaults ) {
  1423. var opts = $.extend( {}, init, defaults );
  1424. if ( init !== false ) {
  1425. new FixedColumns( settings, opts );
  1426. }
  1427. }
  1428. } );
  1429. // Make FixedColumns accessible from the DataTables instance
  1430. $.fn.dataTable.FixedColumns = FixedColumns;
  1431. $.fn.DataTable.FixedColumns = FixedColumns;
  1432. return FixedColumns;
  1433. }));