dataTables.fixedColumns.js 42 KB

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