dataTables.fixedColumns.js 45 KB

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