dataTables.fixedColumns.js 46 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677
  1. /*! FixedColumns 3.3.1
  2. * ©2010-2020 SpryMedia Ltd - datatables.net/license
  3. */
  4. /**
  5. * @summary FixedColumns
  6. * @description Freeze columns in place on a scrolling DataTable
  7. * @version 3.3.1
  8. * @file dataTables.fixedColumns.js
  9. * @author SpryMedia Ltd (www.sprymedia.co.uk)
  10. * @contact www.sprymedia.co.uk/contact
  11. * @copyright Copyright 2010-2020 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' || mouseController === 'key' ) {
  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 && mouseController !== 'key' ) {
  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. mouseController = 'left';
  515. // Pass horizontal scrolling through
  516. var xDelta = e.type === 'wheel' ?
  517. -e.originalEvent.deltaX :
  518. e.originalEvent.wheelDeltaX;
  519. that.dom.scroller.scrollLeft -= xDelta;
  520. } );
  521. }
  522. if ( that.s.iRightColumns > 0 ) {
  523. // When scrolling the right column, scroll the body and the left column
  524. $(that.dom.grid.right.liner)
  525. .on( 'mouseover.DTFC touchstart.DTFC', function () {
  526. if ( ! mouseDown && mouseController !== 'key' ) {
  527. mouseController = 'right';
  528. }
  529. } )
  530. .on( 'scroll.DTFC', function ( e ) {
  531. if ( ! mouseController && e.originalEvent ) {
  532. mouseController = 'right';
  533. }
  534. if ( mouseController === 'right' ) {
  535. that.dom.scroller.scrollTop = that.dom.grid.right.liner.scrollTop;
  536. if ( that.s.iLeftColumns > 0 ) {
  537. that.dom.grid.left.liner.scrollTop = that.dom.grid.right.liner.scrollTop;
  538. }
  539. }
  540. } )
  541. .on( wheelType, function(e) {
  542. mouseController = 'left';
  543. // Pass horizontal scrolling through
  544. var xDelta = e.type === 'wheel' ?
  545. -e.originalEvent.deltaX :
  546. e.originalEvent.wheelDeltaX;
  547. that.dom.scroller.scrollLeft -= xDelta;
  548. } );
  549. }
  550. $(window).on( 'resize.DTFC', function () {
  551. that._fnGridLayout.call( that );
  552. } );
  553. var bFirstDraw = true;
  554. var jqTable = $(this.s.dt.nTable);
  555. jqTable
  556. .on( 'draw.dt.DTFC', function () {
  557. that._fnColCalc();
  558. that._fnDraw.call( that, bFirstDraw );
  559. bFirstDraw = false;
  560. } )
  561. .on('key-focus.dt.DTFC', function () {
  562. // KeyTable navigation needs to be main focused
  563. mouseController = 'key';
  564. })
  565. .on( 'column-sizing.dt.DTFC', function () {
  566. that._fnColCalc();
  567. that._fnGridLayout( that );
  568. } )
  569. .on( 'column-visibility.dt.DTFC', function ( e, settings, column, vis, recalc ) {
  570. if ( recalc === undefined || recalc ) {
  571. that._fnColCalc();
  572. that._fnGridLayout( that );
  573. that._fnDraw( true );
  574. }
  575. } )
  576. .on( 'select.dt.DTFC deselect.dt.DTFC', function ( e, dt, type, indexes ) {
  577. if ( e.namespace === 'dt' ) {
  578. that._fnDraw( false );
  579. }
  580. } )
  581. .on( 'position.dts.dt.DTFC', function (e, tableTop) {
  582. // Sync up with Scroller
  583. if (that.dom.grid.left.body) {
  584. $(that.dom.grid.left.body).find('table').eq(0).css('top', tableTop);
  585. }
  586. if (that.dom.grid.right.body) {
  587. $(that.dom.grid.right.body).find('table').eq(0).css('top', tableTop);
  588. }
  589. } )
  590. .on( 'destroy.dt.DTFC', function () {
  591. jqTable.off( '.DTFC' );
  592. $(that.dom.scroller).off( '.DTFC' );
  593. $(window).off( '.DTFC' );
  594. $(that.s.dt.nTableWrapper).off( '.DTFC' );
  595. $(that.dom.grid.left.liner).off( '.DTFC '+wheelType );
  596. $(that.dom.grid.left.wrapper).remove();
  597. $(that.dom.grid.right.liner).off( '.DTFC '+wheelType );
  598. $(that.dom.grid.right.wrapper).remove();
  599. } );
  600. /* Get things right to start with - note that due to adjusting the columns, there must be
  601. * another redraw of the main table. It doesn't need to be a full redraw however.
  602. */
  603. this._fnGridLayout();
  604. this.s.dt.oInstance.fnDraw(false);
  605. },
  606. /**
  607. * Calculate the column widths for the grid layout
  608. * @returns {void}
  609. * @private
  610. */
  611. "_fnColCalc": function ()
  612. {
  613. var that = this;
  614. var iLeftWidth = 0;
  615. var iRightWidth = 0;
  616. this.s.aiInnerWidths = [];
  617. this.s.aiOuterWidths = [];
  618. $.each( this.s.dt.aoColumns, function (i, col) {
  619. var th = $(col.nTh);
  620. var border;
  621. if ( ! th.filter(':visible').length ) {
  622. that.s.aiInnerWidths.push( 0 );
  623. that.s.aiOuterWidths.push( 0 );
  624. }
  625. else
  626. {
  627. // Inner width is used to assign widths to cells
  628. // Outer width is used to calculate the container
  629. var iWidth = th.outerWidth();
  630. // When working with the left most-cell, need to add on the
  631. // table's border to the outerWidth, since we need to take
  632. // account of it, but it isn't in any cell
  633. if ( that.s.aiOuterWidths.length === 0 ) {
  634. border = $(that.s.dt.nTable).css('border-left-width');
  635. iWidth += typeof border === 'string' && border.indexOf('px') === -1 ?
  636. 1 :
  637. parseInt( border, 10 );
  638. }
  639. // Likewise with the final column on the right
  640. if ( that.s.aiOuterWidths.length === that.s.dt.aoColumns.length-1 ) {
  641. border = $(that.s.dt.nTable).css('border-right-width');
  642. iWidth += typeof border === 'string' && border.indexOf('px') === -1 ?
  643. 1 :
  644. parseInt( border, 10 );
  645. }
  646. that.s.aiOuterWidths.push( iWidth );
  647. that.s.aiInnerWidths.push( th.width() );
  648. if ( i < that.s.iLeftColumns )
  649. {
  650. iLeftWidth += iWidth;
  651. }
  652. if ( that.s.iTableColumns-that.s.iRightColumns <= i )
  653. {
  654. iRightWidth += iWidth;
  655. }
  656. }
  657. } );
  658. this.s.iLeftWidth = iLeftWidth;
  659. this.s.iRightWidth = iRightWidth;
  660. },
  661. /**
  662. * Set up the DOM for the fixed column. The way the layout works is to create a 1x3 grid
  663. * for the left column, the DataTable (for which we just reuse the scrolling element DataTable
  664. * puts into the DOM) and the right column. In each of he two fixed column elements there is a
  665. * grouping wrapper element and then a head, body and footer wrapper. In each of these we then
  666. * place the cloned header, body or footer tables. This effectively gives as 3x3 grid structure.
  667. * @returns {void}
  668. * @private
  669. */
  670. "_fnGridSetup": function ()
  671. {
  672. var that = this;
  673. var oOverflow = this._fnDTOverflow();
  674. var block;
  675. this.dom.body = this.s.dt.nTable;
  676. this.dom.header = this.s.dt.nTHead.parentNode;
  677. this.dom.header.parentNode.parentNode.style.position = "relative";
  678. var nSWrapper =
  679. $('<div class="DTFC_ScrollWrapper" style="position:relative; clear:both;">'+
  680. '<div class="DTFC_LeftWrapper" style="position:absolute; top:0; left:0;" aria-hidden="true">'+
  681. '<div class="DTFC_LeftHeadWrapper" style="position:relative; top:0; left:0; overflow:hidden;"></div>'+
  682. '<div class="DTFC_LeftBodyWrapper" style="position:relative; top:0; left:0; height:0; overflow:hidden;">'+
  683. '<div class="DTFC_LeftBodyLiner" style="position:relative; top:0; left:0; overflow-y:scroll;"></div>'+
  684. '</div>'+
  685. '<div class="DTFC_LeftFootWrapper" style="position:relative; top:0; left:0; overflow:hidden;"></div>'+
  686. '</div>'+
  687. '<div class="DTFC_RightWrapper" style="position:absolute; top:0; right:0;" aria-hidden="true">'+
  688. '<div class="DTFC_RightHeadWrapper" style="position:relative; top:0; left:0;">'+
  689. '<div class="DTFC_RightHeadBlocker DTFC_Blocker" style="position:absolute; top:0; bottom:0;"></div>'+
  690. '</div>'+
  691. '<div class="DTFC_RightBodyWrapper" style="position:relative; top:0; left:0; height:0; overflow:hidden;">'+
  692. '<div class="DTFC_RightBodyLiner" style="position:relative; top:0; left:0; overflow-y:scroll;"></div>'+
  693. '</div>'+
  694. '<div class="DTFC_RightFootWrapper" style="position:relative; top:0; left:0;">'+
  695. '<div class="DTFC_RightFootBlocker DTFC_Blocker" style="position:absolute; top:0; bottom:0;"></div>'+
  696. '</div>'+
  697. '</div>'+
  698. '</div>')[0];
  699. var nLeft = nSWrapper.childNodes[0];
  700. var nRight = nSWrapper.childNodes[1];
  701. this.dom.grid.dt.parentNode.insertBefore( nSWrapper, this.dom.grid.dt );
  702. nSWrapper.appendChild( this.dom.grid.dt );
  703. this.dom.grid.wrapper = nSWrapper;
  704. if ( this.s.iLeftColumns > 0 )
  705. {
  706. this.dom.grid.left.wrapper = nLeft;
  707. this.dom.grid.left.head = nLeft.childNodes[0];
  708. this.dom.grid.left.body = nLeft.childNodes[1];
  709. this.dom.grid.left.liner = $('div.DTFC_LeftBodyLiner', nSWrapper)[0];
  710. nSWrapper.appendChild( nLeft );
  711. }
  712. if ( this.s.iRightColumns > 0 )
  713. {
  714. this.dom.grid.right.wrapper = nRight;
  715. this.dom.grid.right.head = nRight.childNodes[0];
  716. this.dom.grid.right.body = nRight.childNodes[1];
  717. this.dom.grid.right.liner = $('div.DTFC_RightBodyLiner', nSWrapper)[0];
  718. nRight.style.right = oOverflow.bar+"px";
  719. block = $('div.DTFC_RightHeadBlocker', nSWrapper)[0];
  720. block.style.width = oOverflow.bar+"px";
  721. block.style.right = -oOverflow.bar+"px";
  722. this.dom.grid.right.headBlock = block;
  723. block = $('div.DTFC_RightFootBlocker', nSWrapper)[0];
  724. block.style.width = oOverflow.bar+"px";
  725. block.style.right = -oOverflow.bar+"px";
  726. this.dom.grid.right.footBlock = block;
  727. nSWrapper.appendChild( nRight );
  728. }
  729. if ( this.s.dt.nTFoot )
  730. {
  731. this.dom.footer = this.s.dt.nTFoot.parentNode;
  732. if ( this.s.iLeftColumns > 0 )
  733. {
  734. this.dom.grid.left.foot = nLeft.childNodes[2];
  735. }
  736. if ( this.s.iRightColumns > 0 )
  737. {
  738. this.dom.grid.right.foot = nRight.childNodes[2];
  739. }
  740. }
  741. // RTL support - swap the position of the left and right columns (#48)
  742. if ( this.s.rtl ) {
  743. $('div.DTFC_RightHeadBlocker', nSWrapper).css( {
  744. left: -oOverflow.bar+'px',
  745. right: ''
  746. } );
  747. }
  748. },
  749. /**
  750. * Style and position the grid used for the FixedColumns layout
  751. * @returns {void}
  752. * @private
  753. */
  754. "_fnGridLayout": function ()
  755. {
  756. var that = this;
  757. var oGrid = this.dom.grid;
  758. var iWidth = $(oGrid.wrapper).width();
  759. var iBodyHeight = this.s.dt.nTable.parentNode.offsetHeight;
  760. var iFullHeight = this.s.dt.nTable.parentNode.parentNode.offsetHeight;
  761. var oOverflow = this._fnDTOverflow();
  762. var iLeftWidth = this.s.iLeftWidth;
  763. var iRightWidth = this.s.iRightWidth;
  764. var rtl = $(this.dom.body).css('direction') === 'rtl';
  765. var wrapper;
  766. var scrollbarAdjust = function ( node, width ) {
  767. if ( ! oOverflow.bar ) {
  768. // If there is no scrollbar (Macs) we need to hide the auto scrollbar
  769. node.style.width = (width+20)+"px";
  770. node.style.paddingRight = "20px";
  771. node.style.boxSizing = "border-box";
  772. }
  773. else if ( that._firefoxScrollError() ) {
  774. // See the above function for why this is required
  775. if ( $(node).height() > 34 ) {
  776. node.style.width = (width+oOverflow.bar)+"px";
  777. }
  778. }
  779. else {
  780. // Otherwise just overflow by the scrollbar
  781. node.style.width = (width+oOverflow.bar)+"px";
  782. }
  783. };
  784. // When x scrolling - don't paint the fixed columns over the x scrollbar
  785. if ( oOverflow.x )
  786. {
  787. iBodyHeight -= oOverflow.bar;
  788. }
  789. oGrid.wrapper.style.height = iFullHeight+"px";
  790. if ( this.s.iLeftColumns > 0 )
  791. {
  792. wrapper = oGrid.left.wrapper;
  793. wrapper.style.width = iLeftWidth+'px';
  794. wrapper.style.height = '1px';
  795. // Swap the position of the left and right columns for rtl (#48)
  796. // This is always up against the edge, scrollbar on the far side
  797. if ( rtl ) {
  798. wrapper.style.left = '';
  799. wrapper.style.right = 0;
  800. }
  801. else {
  802. wrapper.style.left = 0;
  803. wrapper.style.right = '';
  804. }
  805. oGrid.left.body.style.height = iBodyHeight+"px";
  806. if ( oGrid.left.foot ) {
  807. oGrid.left.foot.style.top = (oOverflow.x ? oOverflow.bar : 0)+"px"; // shift footer for scrollbar
  808. }
  809. scrollbarAdjust( oGrid.left.liner, iLeftWidth );
  810. oGrid.left.liner.style.height = iBodyHeight+"px";
  811. oGrid.left.liner.style.maxHeight = iBodyHeight+"px";
  812. }
  813. if ( this.s.iRightColumns > 0 )
  814. {
  815. wrapper = oGrid.right.wrapper;
  816. wrapper.style.width = iRightWidth+'px';
  817. wrapper.style.height = '1px';
  818. // Need to take account of the vertical scrollbar
  819. if ( this.s.rtl ) {
  820. wrapper.style.left = oOverflow.y ? oOverflow.bar+'px' : 0;
  821. wrapper.style.right = '';
  822. }
  823. else {
  824. wrapper.style.left = '';
  825. wrapper.style.right = oOverflow.y ? oOverflow.bar+'px' : 0;
  826. }
  827. oGrid.right.body.style.height = iBodyHeight+"px";
  828. if ( oGrid.right.foot ) {
  829. oGrid.right.foot.style.top = (oOverflow.x ? oOverflow.bar : 0)+"px";
  830. }
  831. scrollbarAdjust( oGrid.right.liner, iRightWidth );
  832. oGrid.right.liner.style.height = iBodyHeight+"px";
  833. oGrid.right.liner.style.maxHeight = iBodyHeight+"px";
  834. oGrid.right.headBlock.style.display = oOverflow.y ? 'block' : 'none';
  835. oGrid.right.footBlock.style.display = oOverflow.y ? 'block' : 'none';
  836. }
  837. },
  838. /**
  839. * Get information about the DataTable's scrolling state - specifically if the table is scrolling
  840. * on either the x or y axis, and also the scrollbar width.
  841. * @returns {object} Information about the DataTables scrolling state with the properties:
  842. * 'x', 'y' and 'bar'
  843. * @private
  844. */
  845. "_fnDTOverflow": function ()
  846. {
  847. var nTable = this.s.dt.nTable;
  848. var nTableScrollBody = nTable.parentNode;
  849. var out = {
  850. "x": false,
  851. "y": false,
  852. "bar": this.s.dt.oScroll.iBarWidth
  853. };
  854. if ( nTable.offsetWidth > nTableScrollBody.clientWidth )
  855. {
  856. out.x = true;
  857. }
  858. if ( nTable.offsetHeight > nTableScrollBody.clientHeight )
  859. {
  860. out.y = true;
  861. }
  862. return out;
  863. },
  864. /**
  865. * Clone and position the fixed columns
  866. * @returns {void}
  867. * @param {Boolean} bAll Indicate if the header and footer should be updated as well (true)
  868. * @private
  869. */
  870. "_fnDraw": function ( bAll )
  871. {
  872. this._fnGridLayout();
  873. this._fnCloneLeft( bAll );
  874. this._fnCloneRight( bAll );
  875. /* Draw callback function */
  876. if ( this.s.fnDrawCallback !== null )
  877. {
  878. this.s.fnDrawCallback.call( this, this.dom.clone.left, this.dom.clone.right );
  879. }
  880. /* Event triggering */
  881. $(this).trigger( 'draw.dtfc', {
  882. "leftClone": this.dom.clone.left,
  883. "rightClone": this.dom.clone.right
  884. } );
  885. },
  886. /**
  887. * Clone the right columns
  888. * @returns {void}
  889. * @param {Boolean} bAll Indicate if the header and footer should be updated as well (true)
  890. * @private
  891. */
  892. "_fnCloneRight": function ( bAll )
  893. {
  894. if ( this.s.iRightColumns <= 0 ) {
  895. return;
  896. }
  897. var that = this,
  898. i, jq,
  899. aiColumns = [];
  900. for ( i=this.s.iTableColumns-this.s.iRightColumns ; i<this.s.iTableColumns ; i++ ) {
  901. if ( this.s.dt.aoColumns[i].bVisible ) {
  902. aiColumns.push( i );
  903. }
  904. }
  905. this._fnClone( this.dom.clone.right, this.dom.grid.right, aiColumns, bAll );
  906. },
  907. /**
  908. * Clone the left columns
  909. * @returns {void}
  910. * @param {Boolean} bAll Indicate if the header and footer should be updated as well (true)
  911. * @private
  912. */
  913. "_fnCloneLeft": function ( bAll )
  914. {
  915. if ( this.s.iLeftColumns <= 0 ) {
  916. return;
  917. }
  918. var that = this,
  919. i, jq,
  920. aiColumns = [];
  921. for ( i=0 ; i<this.s.iLeftColumns ; i++ ) {
  922. if ( this.s.dt.aoColumns[i].bVisible ) {
  923. aiColumns.push( i );
  924. }
  925. }
  926. this._fnClone( this.dom.clone.left, this.dom.grid.left, aiColumns, bAll );
  927. },
  928. /**
  929. * Make a copy of the layout object for a header or footer element from DataTables. Note that
  930. * this method will clone the nodes in the layout object.
  931. * @returns {Array} Copy of the layout array
  932. * @param {Object} aoOriginal Layout array from DataTables (aoHeader or aoFooter)
  933. * @param {Object} aiColumns Columns to copy
  934. * @param {boolean} events Copy cell events or not
  935. * @private
  936. */
  937. "_fnCopyLayout": function ( aoOriginal, aiColumns, events )
  938. {
  939. var aReturn = [];
  940. var aClones = [];
  941. var aCloned = [];
  942. for ( var i=0, iLen=aoOriginal.length ; i<iLen ; i++ )
  943. {
  944. var aRow = [];
  945. aRow.nTr = $(aoOriginal[i].nTr).clone(events, false)[0];
  946. for ( var j=0, jLen=this.s.iTableColumns ; j<jLen ; j++ )
  947. {
  948. if ( $.inArray( j, aiColumns ) === -1 )
  949. {
  950. continue;
  951. }
  952. var iCloned = $.inArray( aoOriginal[i][j].cell, aCloned );
  953. if ( iCloned === -1 )
  954. {
  955. var nClone = $(aoOriginal[i][j].cell).clone(events, false)[0];
  956. aClones.push( nClone );
  957. aCloned.push( aoOriginal[i][j].cell );
  958. aRow.push( {
  959. "cell": nClone,
  960. "unique": aoOriginal[i][j].unique
  961. } );
  962. }
  963. else
  964. {
  965. aRow.push( {
  966. "cell": aClones[ iCloned ],
  967. "unique": aoOriginal[i][j].unique
  968. } );
  969. }
  970. }
  971. aReturn.push( aRow );
  972. }
  973. return aReturn;
  974. },
  975. /**
  976. * Clone the DataTable nodes and place them in the DOM (sized correctly)
  977. * @returns {void}
  978. * @param {Object} oClone Object containing the header, footer and body cloned DOM elements
  979. * @param {Object} oGrid Grid object containing the display grid elements for the cloned
  980. * column (left or right)
  981. * @param {Array} aiColumns Column indexes which should be operated on from the DataTable
  982. * @param {Boolean} bAll Indicate if the header and footer should be updated as well (true)
  983. * @private
  984. */
  985. "_fnClone": function ( oClone, oGrid, aiColumns, bAll )
  986. {
  987. var that = this,
  988. i, iLen, j, jLen, jq, nTarget, iColumn, nClone, iIndex, aoCloneLayout,
  989. jqCloneThead, aoFixedHeader,
  990. dt = this.s.dt;
  991. /*
  992. * Header
  993. */
  994. if ( bAll )
  995. {
  996. $(oClone.header).remove();
  997. oClone.header = $(this.dom.header).clone(true, false)[0];
  998. oClone.header.className += " DTFC_Cloned";
  999. oClone.header.style.width = "100%";
  1000. oGrid.head.appendChild( oClone.header );
  1001. /* Copy the DataTables layout cache for the header for our floating column */
  1002. aoCloneLayout = this._fnCopyLayout( dt.aoHeader, aiColumns, true );
  1003. jqCloneThead = $('>thead', oClone.header);
  1004. jqCloneThead.empty();
  1005. /* Add the created cloned TR elements to the table */
  1006. for ( i=0, iLen=aoCloneLayout.length ; i<iLen ; i++ )
  1007. {
  1008. jqCloneThead[0].appendChild( aoCloneLayout[i].nTr );
  1009. }
  1010. /* Use the handy _fnDrawHead function in DataTables to do the rowspan/colspan
  1011. * calculations for us
  1012. */
  1013. dt.oApi._fnDrawHead( dt, aoCloneLayout, true );
  1014. }
  1015. else
  1016. {
  1017. /* To ensure that we copy cell classes exactly, regardless of colspan, multiple rows
  1018. * etc, we make a copy of the header from the DataTable again, but don't insert the
  1019. * cloned cells, just copy the classes across. To get the matching layout for the
  1020. * fixed component, we use the DataTables _fnDetectHeader method, allowing 1:1 mapping
  1021. */
  1022. aoCloneLayout = this._fnCopyLayout( dt.aoHeader, aiColumns, false );
  1023. aoFixedHeader=[];
  1024. dt.oApi._fnDetectHeader( aoFixedHeader, $('>thead', oClone.header)[0] );
  1025. for ( i=0, iLen=aoCloneLayout.length ; i<iLen ; i++ )
  1026. {
  1027. for ( j=0, jLen=aoCloneLayout[i].length ; j<jLen ; j++ )
  1028. {
  1029. aoFixedHeader[i][j].cell.className = aoCloneLayout[i][j].cell.className;
  1030. // If jQuery UI theming is used we need to copy those elements as well
  1031. $('span.DataTables_sort_icon', aoFixedHeader[i][j].cell).each( function () {
  1032. this.className = $('span.DataTables_sort_icon', aoCloneLayout[i][j].cell)[0].className;
  1033. } );
  1034. }
  1035. }
  1036. }
  1037. this._fnEqualiseHeights( 'thead', this.dom.header, oClone.header );
  1038. /*
  1039. * Body
  1040. */
  1041. if ( this.s.sHeightMatch == 'auto' )
  1042. {
  1043. /* Remove any heights which have been applied already and let the browser figure it out */
  1044. $('>tbody>tr', that.dom.body).css('height', 'auto');
  1045. }
  1046. if ( oClone.body !== null )
  1047. {
  1048. $(oClone.body).remove();
  1049. oClone.body = null;
  1050. }
  1051. oClone.body = $(this.dom.body).clone(true)[0];
  1052. oClone.body.className += " DTFC_Cloned";
  1053. oClone.body.style.paddingBottom = dt.oScroll.iBarWidth+"px";
  1054. oClone.body.style.marginBottom = (dt.oScroll.iBarWidth*2)+"px"; /* For IE */
  1055. if ( oClone.body.getAttribute('id') !== null )
  1056. {
  1057. oClone.body.removeAttribute('id');
  1058. }
  1059. $('>thead>tr', oClone.body).empty();
  1060. $('>tfoot', oClone.body).remove();
  1061. var nBody = $('tbody', oClone.body)[0];
  1062. $(nBody).empty();
  1063. if ( dt.aiDisplay.length > 0 )
  1064. {
  1065. /* Copy the DataTables' header elements to force the column width in exactly the
  1066. * same way that DataTables does it - have the header element, apply the width and
  1067. * colapse it down
  1068. */
  1069. var nInnerThead = $('>thead>tr', oClone.body)[0];
  1070. for ( iIndex=0 ; iIndex<aiColumns.length ; iIndex++ )
  1071. {
  1072. iColumn = aiColumns[iIndex];
  1073. nClone = $(dt.aoColumns[iColumn].nTh).clone(true)[0];
  1074. nClone.innerHTML = "";
  1075. var oStyle = nClone.style;
  1076. oStyle.paddingTop = "0";
  1077. oStyle.paddingBottom = "0";
  1078. oStyle.borderTopWidth = "0";
  1079. oStyle.borderBottomWidth = "0";
  1080. oStyle.height = 0;
  1081. oStyle.width = that.s.aiInnerWidths[iColumn]+"px";
  1082. nInnerThead.appendChild( nClone );
  1083. }
  1084. /* Add in the tbody elements, cloning form the master table */
  1085. $('>tbody>tr', that.dom.body).each( function (z) {
  1086. var i = that.s.dt.oFeatures.bServerSide===false ?
  1087. that.s.dt.aiDisplay[ that.s.dt._iDisplayStart+z ] : z;
  1088. var aTds = that.s.dt.aoData[ i ].anCells || $(this).children('td, th');
  1089. var n = this.cloneNode(false);
  1090. n.removeAttribute('id');
  1091. n.setAttribute( 'data-dt-row', i );
  1092. for ( iIndex=0 ; iIndex<aiColumns.length ; iIndex++ )
  1093. {
  1094. iColumn = aiColumns[iIndex];
  1095. if ( aTds.length > 0 )
  1096. {
  1097. nClone = $( aTds[iColumn] ).clone(true, true)[0];
  1098. nClone.removeAttribute( 'id' );
  1099. nClone.setAttribute( 'data-dt-row', i );
  1100. nClone.setAttribute( 'data-dt-column', iColumn );
  1101. n.appendChild( nClone );
  1102. }
  1103. }
  1104. nBody.appendChild( n );
  1105. } );
  1106. }
  1107. else
  1108. {
  1109. $('>tbody>tr', that.dom.body).each( function (z) {
  1110. nClone = this.cloneNode(true);
  1111. nClone.className += ' DTFC_NoData';
  1112. $('td', nClone).html('');
  1113. nBody.appendChild( nClone );
  1114. } );
  1115. }
  1116. oClone.body.style.width = "100%";
  1117. oClone.body.style.margin = "0";
  1118. oClone.body.style.padding = "0";
  1119. // Interop with Scroller - need to use a height forcing element in the
  1120. // scrolling area in the same way that Scroller does in the body scroll.
  1121. if ( dt.oScroller !== undefined )
  1122. {
  1123. var scrollerForcer = dt.oScroller.dom.force;
  1124. if ( ! oGrid.forcer ) {
  1125. oGrid.forcer = scrollerForcer.cloneNode( true );
  1126. oGrid.liner.appendChild( oGrid.forcer );
  1127. }
  1128. else {
  1129. oGrid.forcer.style.height = scrollerForcer.style.height;
  1130. }
  1131. }
  1132. oGrid.liner.appendChild( oClone.body );
  1133. this._fnEqualiseHeights( 'tbody', that.dom.body, oClone.body );
  1134. /*
  1135. * Footer
  1136. */
  1137. if ( dt.nTFoot !== null )
  1138. {
  1139. if ( bAll )
  1140. {
  1141. if ( oClone.footer !== null )
  1142. {
  1143. oClone.footer.parentNode.removeChild( oClone.footer );
  1144. }
  1145. oClone.footer = $(this.dom.footer).clone(true, true)[0];
  1146. oClone.footer.className += " DTFC_Cloned";
  1147. oClone.footer.style.width = "100%";
  1148. oGrid.foot.appendChild( oClone.footer );
  1149. /* Copy the footer just like we do for the header */
  1150. aoCloneLayout = this._fnCopyLayout( dt.aoFooter, aiColumns, true );
  1151. var jqCloneTfoot = $('>tfoot', oClone.footer);
  1152. jqCloneTfoot.empty();
  1153. for ( i=0, iLen=aoCloneLayout.length ; i<iLen ; i++ )
  1154. {
  1155. jqCloneTfoot[0].appendChild( aoCloneLayout[i].nTr );
  1156. }
  1157. dt.oApi._fnDrawHead( dt, aoCloneLayout, true );
  1158. }
  1159. else
  1160. {
  1161. aoCloneLayout = this._fnCopyLayout( dt.aoFooter, aiColumns, false );
  1162. var aoCurrFooter=[];
  1163. dt.oApi._fnDetectHeader( aoCurrFooter, $('>tfoot', oClone.footer)[0] );
  1164. for ( i=0, iLen=aoCloneLayout.length ; i<iLen ; i++ )
  1165. {
  1166. for ( j=0, jLen=aoCloneLayout[i].length ; j<jLen ; j++ )
  1167. {
  1168. aoCurrFooter[i][j].cell.className = aoCloneLayout[i][j].cell.className;
  1169. }
  1170. }
  1171. }
  1172. this._fnEqualiseHeights( 'tfoot', this.dom.footer, oClone.footer );
  1173. }
  1174. /* Equalise the column widths between the header footer and body - body get's priority */
  1175. var anUnique = dt.oApi._fnGetUniqueThs( dt, $('>thead', oClone.header)[0] );
  1176. $(anUnique).each( function (i) {
  1177. iColumn = aiColumns[i];
  1178. this.style.width = that.s.aiInnerWidths[iColumn]+"px";
  1179. } );
  1180. if ( that.s.dt.nTFoot !== null )
  1181. {
  1182. anUnique = dt.oApi._fnGetUniqueThs( dt, $('>tfoot', oClone.footer)[0] );
  1183. $(anUnique).each( function (i) {
  1184. iColumn = aiColumns[i];
  1185. this.style.width = that.s.aiInnerWidths[iColumn]+"px";
  1186. } );
  1187. }
  1188. },
  1189. /**
  1190. * From a given table node (THEAD etc), get a list of TR direct child elements
  1191. * @param {Node} nIn Table element to search for TR elements (THEAD, TBODY or TFOOT element)
  1192. * @returns {Array} List of TR elements found
  1193. * @private
  1194. */
  1195. "_fnGetTrNodes": function ( nIn )
  1196. {
  1197. var aOut = [];
  1198. for ( var i=0, iLen=nIn.childNodes.length ; i<iLen ; i++ )
  1199. {
  1200. if ( nIn.childNodes[i].nodeName.toUpperCase() == "TR" )
  1201. {
  1202. aOut.push( nIn.childNodes[i] );
  1203. }
  1204. }
  1205. return aOut;
  1206. },
  1207. /**
  1208. * Equalise the heights of the rows in a given table node in a cross browser way
  1209. * @returns {void}
  1210. * @param {String} nodeName Node type - thead, tbody or tfoot
  1211. * @param {Node} original Original node to take the heights from
  1212. * @param {Node} clone Copy the heights to
  1213. * @private
  1214. */
  1215. "_fnEqualiseHeights": function ( nodeName, original, clone )
  1216. {
  1217. if ( this.s.sHeightMatch == 'none' && nodeName !== 'thead' && nodeName !== 'tfoot' )
  1218. {
  1219. return;
  1220. }
  1221. var that = this,
  1222. i, iLen, iHeight, iHeight2, iHeightOriginal, iHeightClone,
  1223. rootOriginal = original.getElementsByTagName(nodeName)[0],
  1224. rootClone = clone.getElementsByTagName(nodeName)[0],
  1225. jqBoxHack = $('>'+nodeName+'>tr:eq(0)', original).children(':first'),
  1226. iBoxHack = jqBoxHack.outerHeight() - jqBoxHack.height(),
  1227. anOriginal = this._fnGetTrNodes( rootOriginal ),
  1228. anClone = this._fnGetTrNodes( rootClone ),
  1229. heights = [];
  1230. for ( i=0, iLen=anClone.length ; i<iLen ; i++ )
  1231. {
  1232. iHeightOriginal = anOriginal[i].offsetHeight;
  1233. iHeightClone = anClone[i].offsetHeight;
  1234. iHeight = iHeightClone > iHeightOriginal ? iHeightClone : iHeightOriginal;
  1235. if ( this.s.sHeightMatch == 'semiauto' )
  1236. {
  1237. anOriginal[i]._DTTC_iHeight = iHeight;
  1238. }
  1239. heights.push( iHeight );
  1240. }
  1241. for ( i=0, iLen=anClone.length ; i<iLen ; i++ )
  1242. {
  1243. anClone[i].style.height = heights[i]+"px";
  1244. anOriginal[i].style.height = heights[i]+"px";
  1245. }
  1246. },
  1247. /**
  1248. * Determine if the UA suffers from Firefox's overflow:scroll scrollbars
  1249. * not being shown bug.
  1250. *
  1251. * Firefox doesn't draw scrollbars, even if it is told to using
  1252. * overflow:scroll, if the div is less than 34px height. See bugs 292284 and
  1253. * 781885. Using UA detection here since this is particularly hard to detect
  1254. * using objects - its a straight up rendering error in Firefox.
  1255. *
  1256. * @return {boolean} True if Firefox error is present, false otherwise
  1257. */
  1258. _firefoxScrollError: function () {
  1259. if ( _firefoxScroll === undefined ) {
  1260. var test = $('<div/>')
  1261. .css( {
  1262. position: 'absolute',
  1263. top: 0,
  1264. left: 0,
  1265. height: 10,
  1266. width: 50,
  1267. overflow: 'scroll'
  1268. } )
  1269. .appendTo( 'body' );
  1270. // Make sure this doesn't apply on Macs with 0 width scrollbars
  1271. _firefoxScroll = (
  1272. test[0].clientWidth === test[0].offsetWidth && this._fnDTOverflow().bar !== 0
  1273. );
  1274. test.remove();
  1275. }
  1276. return _firefoxScroll;
  1277. }
  1278. } );
  1279. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  1280. * Statics
  1281. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  1282. /**
  1283. * FixedColumns default settings for initialisation
  1284. * @name FixedColumns.defaults
  1285. * @namespace
  1286. * @static
  1287. */
  1288. FixedColumns.defaults = /** @lends FixedColumns.defaults */{
  1289. /**
  1290. * Number of left hand columns to fix in position
  1291. * @type int
  1292. * @default 1
  1293. * @static
  1294. * @example
  1295. * var = $('#example').dataTable( {
  1296. * "scrollX": "100%"
  1297. * } );
  1298. * new $.fn.dataTable.fixedColumns( table, {
  1299. * "leftColumns": 2
  1300. * } );
  1301. */
  1302. "iLeftColumns": 1,
  1303. /**
  1304. * Number of right hand columns to fix in position
  1305. * @type int
  1306. * @default 0
  1307. * @static
  1308. * @example
  1309. * var table = $('#example').dataTable( {
  1310. * "scrollX": "100%"
  1311. * } );
  1312. * new $.fn.dataTable.fixedColumns( table, {
  1313. * "rightColumns": 1
  1314. * } );
  1315. */
  1316. "iRightColumns": 0,
  1317. /**
  1318. * Draw callback function which is called when FixedColumns has redrawn the fixed assets
  1319. * @type function(object, object):void
  1320. * @default null
  1321. * @static
  1322. * @example
  1323. * var table = $('#example').dataTable( {
  1324. * "scrollX": "100%"
  1325. * } );
  1326. * new $.fn.dataTable.fixedColumns( table, {
  1327. * "drawCallback": function () {
  1328. * alert( "FixedColumns redraw" );
  1329. * }
  1330. * } );
  1331. */
  1332. "fnDrawCallback": null,
  1333. /**
  1334. * Height matching algorthim to use. This can be "none" which will result in no height
  1335. * matching being applied by FixedColumns (height matching could be forced by CSS in this
  1336. * case), "semiauto" whereby the height calculation will be performed once, and the result
  1337. * cached to be used again (fnRecalculateHeight can be used to force recalculation), or
  1338. * "auto" when height matching is performed on every draw (slowest but must accurate)
  1339. * @type string
  1340. * @default semiauto
  1341. * @static
  1342. * @example
  1343. * var table = $('#example').dataTable( {
  1344. * "scrollX": "100%"
  1345. * } );
  1346. * new $.fn.dataTable.fixedColumns( table, {
  1347. * "heightMatch": "auto"
  1348. * } );
  1349. */
  1350. "sHeightMatch": "semiauto"
  1351. };
  1352. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  1353. * Constants
  1354. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  1355. /**
  1356. * FixedColumns version
  1357. * @name FixedColumns.version
  1358. * @type String
  1359. * @default See code
  1360. * @static
  1361. */
  1362. FixedColumns.version = "3.3.1";
  1363. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  1364. * DataTables API integration
  1365. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  1366. DataTable.Api.register( 'fixedColumns()', function () {
  1367. return this;
  1368. } );
  1369. DataTable.Api.register( 'fixedColumns().update()', function () {
  1370. return this.iterator( 'table', function ( ctx ) {
  1371. if ( ctx._oFixedColumns ) {
  1372. ctx._oFixedColumns.fnUpdate();
  1373. }
  1374. } );
  1375. } );
  1376. DataTable.Api.register( 'fixedColumns().relayout()', function () {
  1377. return this.iterator( 'table', function ( ctx ) {
  1378. if ( ctx._oFixedColumns ) {
  1379. ctx._oFixedColumns.fnRedrawLayout();
  1380. }
  1381. } );
  1382. } );
  1383. DataTable.Api.register( 'rows().recalcHeight()', function () {
  1384. return this.iterator( 'row', function ( ctx, idx ) {
  1385. if ( ctx._oFixedColumns ) {
  1386. ctx._oFixedColumns.fnRecalculateHeight( this.row(idx).node() );
  1387. }
  1388. } );
  1389. } );
  1390. DataTable.Api.register( 'fixedColumns().rowIndex()', function ( row ) {
  1391. row = $(row);
  1392. return row.parents('.DTFC_Cloned').length ?
  1393. this.rows( { page: 'current' } ).indexes()[ row.index() ] :
  1394. this.row( row ).index();
  1395. } );
  1396. DataTable.Api.register( 'fixedColumns().cellIndex()', function ( cell ) {
  1397. cell = $(cell);
  1398. if ( cell.parents('.DTFC_Cloned').length ) {
  1399. var rowClonedIdx = cell.parent().index();
  1400. var rowIdx = this.rows( { page: 'current' } ).indexes()[ rowClonedIdx ];
  1401. var columnIdx;
  1402. if ( cell.parents('.DTFC_LeftWrapper').length ) {
  1403. columnIdx = cell.index();
  1404. }
  1405. else {
  1406. var columns = this.columns().flatten().length;
  1407. columnIdx = columns - this.context[0]._oFixedColumns.s.iRightColumns + cell.index();
  1408. }
  1409. return {
  1410. row: rowIdx,
  1411. column: this.column.index( 'toData', columnIdx ),
  1412. columnVisible: columnIdx
  1413. };
  1414. }
  1415. else {
  1416. return this.cell( cell ).index();
  1417. }
  1418. } );
  1419. DataTable.Api.registerPlural( 'cells().fixedNodes()', 'cell().fixedNode()', function () {
  1420. return this.iterator( 'cell', function ( settings, row, column ) {
  1421. return settings._oFixedColumns
  1422. ? settings._oFixedColumns.fnToFixedNode( row, column )
  1423. : this.cell(row, column).node();
  1424. }, 1 );
  1425. } );
  1426. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  1427. * Initialisation
  1428. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  1429. // Attach a listener to the document which listens for DataTables initialisation
  1430. // events so we can automatically initialise
  1431. $(document).on( 'init.dt.fixedColumns', function (e, settings) {
  1432. if ( e.namespace !== 'dt' ) {
  1433. return;
  1434. }
  1435. var init = settings.oInit.fixedColumns;
  1436. var defaults = DataTable.defaults.fixedColumns;
  1437. if ( init || defaults ) {
  1438. var opts = $.extend( {}, init, defaults );
  1439. if ( init !== false ) {
  1440. new FixedColumns( settings, opts );
  1441. }
  1442. }
  1443. } );
  1444. // Make FixedColumns accessible from the DataTables instance
  1445. $.fn.dataTable.FixedColumns = FixedColumns;
  1446. $.fn.DataTable.FixedColumns = FixedColumns;
  1447. return FixedColumns;
  1448. }));