dataTables.rowGroup.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472
  1. /*! RowGroup 1.1.1
  2. * ©2017-2019 SpryMedia Ltd - datatables.net/license
  3. */
  4. /**
  5. * @summary RowGroup
  6. * @description RowGrouping for DataTables
  7. * @version 1.1.1
  8. * @file dataTables.rowGroup.js
  9. * @author SpryMedia Ltd (www.sprymedia.co.uk)
  10. * @contact datatables.net
  11. * @copyright Copyright 2017-2019 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 RowGroup = function ( dt, opts ) {
  49. // Sanity check that we are using DataTables 1.10 or newer
  50. if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.10.8' ) ) {
  51. throw 'RowGroup requires DataTables 1.10.8 or newer';
  52. }
  53. // User and defaults configuration object
  54. this.c = $.extend( true, {},
  55. DataTable.defaults.rowGroup,
  56. RowGroup.defaults,
  57. opts
  58. );
  59. // Internal settings
  60. this.s = {
  61. dt: new DataTable.Api( dt )
  62. };
  63. // DOM items
  64. this.dom = {
  65. };
  66. // Check if row grouping has already been initialised on this table
  67. var settings = this.s.dt.settings()[0];
  68. var existing = settings.rowGroup;
  69. if ( existing ) {
  70. return existing;
  71. }
  72. settings.rowGroup = this;
  73. this._constructor();
  74. };
  75. $.extend( RowGroup.prototype, {
  76. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  77. * API methods for DataTables API interface
  78. */
  79. /**
  80. * Get/set the grouping data source - need to call draw after this is
  81. * executed as a setter
  82. * @returns string~RowGroup
  83. */
  84. dataSrc: function ( val )
  85. {
  86. if ( val === undefined ) {
  87. return this.c.dataSrc;
  88. }
  89. var dt = this.s.dt;
  90. this.c.dataSrc = val;
  91. $(dt.table().node()).triggerHandler( 'rowgroup-datasrc.dt', [ dt, val ] );
  92. return this;
  93. },
  94. /**
  95. * Disable - need to call draw after this is executed
  96. * @returns RowGroup
  97. */
  98. disable: function ()
  99. {
  100. this.c.enable = false;
  101. return this;
  102. },
  103. /**
  104. * Enable - need to call draw after this is executed
  105. * @returns RowGroup
  106. */
  107. enable: function ( flag )
  108. {
  109. if ( flag === false ) {
  110. return this.disable();
  111. }
  112. this.c.enable = true;
  113. return this;
  114. },
  115. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  116. * Constructor
  117. */
  118. _constructor: function ()
  119. {
  120. var that = this;
  121. var dt = this.s.dt;
  122. dt.on( 'draw.dtrg', function () {
  123. if ( that.c.enable ) {
  124. that._draw();
  125. }
  126. } );
  127. dt.on( 'column-visibility.dt.dtrg responsive-resize.dt.dtrg', function () {
  128. that._adjustColspan();
  129. } );
  130. dt.on( 'destroy', function () {
  131. dt.off( '.dtrg' );
  132. } );
  133. dt.on('responsive-resize.dt', function () {
  134. that._adjustColspan();
  135. })
  136. },
  137. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  138. * Private methods
  139. */
  140. /**
  141. * Adjust column span when column visibility changes
  142. * @private
  143. */
  144. _adjustColspan: function ()
  145. {
  146. $( 'tr.'+this.c.className, this.s.dt.table().body() ).find('td')
  147. .attr( 'colspan', this._colspan() );
  148. },
  149. /**
  150. * Get the number of columns that a grouping row should span
  151. * @private
  152. */
  153. _colspan: function ()
  154. {
  155. return this.s.dt.columns().visible().reduce( function (a, b) {
  156. return a + b;
  157. }, 0 );
  158. },
  159. /**
  160. * Update function that is called whenever we need to draw the grouping rows.
  161. * This is basically a bootstrap for the self iterative _group and _groupDisplay
  162. * methods
  163. * @private
  164. */
  165. _draw: function ()
  166. {
  167. var dt = this.s.dt;
  168. var groupedRows = this._group( 0, dt.rows( { page: 'current' } ).indexes() );
  169. this._groupDisplay( 0, groupedRows );
  170. },
  171. /**
  172. * Get the grouping information from a data set (index) of rows
  173. * @param {number} level Nesting level
  174. * @param {DataTables.Api} rows API of the rows to consider for this group
  175. * @returns {object[]} Nested grouping information - it is structured like this:
  176. * {
  177. * dataPoint: 'Edinburgh',
  178. * rows: [ 1,2,3,4,5,6,7 ],
  179. * children: [ {
  180. * dataPoint: 'developer'
  181. * rows: [ 1, 2, 3 ]
  182. * },
  183. * {
  184. * dataPoint: 'support',
  185. * rows: [ 4, 5, 6, 7 ]
  186. * } ]
  187. * }
  188. * @private
  189. */
  190. _group: function ( level, rows ) {
  191. var fns = $.isArray( this.c.dataSrc ) ? this.c.dataSrc : [ this.c.dataSrc ];
  192. var fn = DataTable.ext.oApi._fnGetObjectDataFn( fns[ level ] );
  193. var dt = this.s.dt;
  194. var group, last;
  195. var data = [];
  196. var that = this;
  197. for ( var i=0, ien=rows.length ; i<ien ; i++ ) {
  198. var rowIndex = rows[i];
  199. var rowData = dt.row( rowIndex ).data();
  200. var group = fn( rowData );
  201. if ( group === null || group === undefined ) {
  202. group = that.c.emptyDataGroup;
  203. }
  204. if ( last === undefined || group !== last ) {
  205. data.push( {
  206. dataPoint: group,
  207. rows: []
  208. } );
  209. last = group;
  210. }
  211. data[ data.length-1 ].rows.push( rowIndex );
  212. }
  213. if ( fns[ level+1 ] !== undefined ) {
  214. for ( var i=0, ien=data.length ; i<ien ; i++ ) {
  215. data[i].children = this._group( level+1, data[i].rows );
  216. }
  217. }
  218. return data;
  219. },
  220. /**
  221. * Row group display - insert the rows into the document
  222. * @param {number} level Nesting level
  223. * @param {object[]} groups Takes the nested array from `_group`
  224. * @private
  225. */
  226. _groupDisplay: function ( level, groups )
  227. {
  228. var dt = this.s.dt;
  229. var display;
  230. for ( var i=0, ien=groups.length ; i<ien ; i++ ) {
  231. var group = groups[i];
  232. var groupName = group.dataPoint;
  233. var row;
  234. var rows = group.rows;
  235. if ( this.c.startRender ) {
  236. display = this.c.startRender.call( this, dt.rows(rows), groupName, level );
  237. row = this._rowWrap( display, this.c.startClassName, level );
  238. if ( row ) {
  239. row.insertBefore( dt.row( rows[0] ).node() );
  240. }
  241. }
  242. if ( this.c.endRender ) {
  243. display = this.c.endRender.call( this, dt.rows(rows), groupName, level );
  244. row = this._rowWrap( display, this.c.endClassName, level );
  245. if ( row ) {
  246. row.insertAfter( dt.row( rows[ rows.length-1 ] ).node() );
  247. }
  248. }
  249. if ( group.children ) {
  250. this._groupDisplay( level+1, group.children );
  251. }
  252. }
  253. },
  254. /**
  255. * Take a rendered value from an end user and make it suitable for display
  256. * as a row, by wrapping it in a row, or detecting that it is a row.
  257. * @param {node|jQuery|string} display Display value
  258. * @param {string} className Class to add to the row
  259. * @param {array} group
  260. * @param {number} group level
  261. * @private
  262. */
  263. _rowWrap: function ( display, className, level )
  264. {
  265. var row;
  266. if ( display === null || display === '' ) {
  267. display = this.c.emptyDataGroup;
  268. }
  269. if ( display === undefined || display === null ) {
  270. return null;
  271. }
  272. if ( typeof display === 'object' && display.nodeName && display.nodeName.toLowerCase() === 'tr') {
  273. row = $(display);
  274. }
  275. else if (display instanceof $ && display.length && display[0].nodeName.toLowerCase() === 'tr') {
  276. row = display;
  277. }
  278. else {
  279. row = $('<tr/>')
  280. .append(
  281. $('<td/>')
  282. .attr( 'colspan', this._colspan() )
  283. .append( display )
  284. );
  285. }
  286. return row
  287. .addClass( this.c.className )
  288. .addClass( className )
  289. .addClass( 'dtrg-level-'+level );
  290. }
  291. } );
  292. /**
  293. * RowGroup default settings for initialisation
  294. *
  295. * @namespace
  296. * @name RowGroup.defaults
  297. * @static
  298. */
  299. RowGroup.defaults = {
  300. /**
  301. * Class to apply to grouping rows - applied to both the start and
  302. * end grouping rows.
  303. * @type string
  304. */
  305. className: 'dtrg-group',
  306. /**
  307. * Data property from which to read the grouping information
  308. * @type string|integer|array
  309. */
  310. dataSrc: 0,
  311. /**
  312. * Text to show if no data is found for a group
  313. * @type string
  314. */
  315. emptyDataGroup: 'No group',
  316. /**
  317. * Initial enablement state
  318. * @boolean
  319. */
  320. enable: true,
  321. /**
  322. * Class name to give to the end grouping row
  323. * @type string
  324. */
  325. endClassName: 'dtrg-end',
  326. /**
  327. * End grouping label function
  328. * @function
  329. */
  330. endRender: null,
  331. /**
  332. * Class name to give to the start grouping row
  333. * @type string
  334. */
  335. startClassName: 'dtrg-start',
  336. /**
  337. * Start grouping label function
  338. * @function
  339. */
  340. startRender: function ( rows, group ) {
  341. return group;
  342. }
  343. };
  344. RowGroup.version = "1.1.1";
  345. $.fn.dataTable.RowGroup = RowGroup;
  346. $.fn.DataTable.RowGroup = RowGroup;
  347. DataTable.Api.register( 'rowGroup()', function () {
  348. return this;
  349. } );
  350. DataTable.Api.register( 'rowGroup().disable()', function () {
  351. return this.iterator( 'table', function (ctx) {
  352. if ( ctx.rowGroup ) {
  353. ctx.rowGroup.enable( false );
  354. }
  355. } );
  356. } );
  357. DataTable.Api.register( 'rowGroup().enable()', function ( opts ) {
  358. return this.iterator( 'table', function (ctx) {
  359. if ( ctx.rowGroup ) {
  360. ctx.rowGroup.enable( opts === undefined ? true : opts );
  361. }
  362. } );
  363. } );
  364. DataTable.Api.register( 'rowGroup().dataSrc()', function ( val ) {
  365. if ( val === undefined ) {
  366. return this.context[0].rowGroup.dataSrc();
  367. }
  368. return this.iterator( 'table', function (ctx) {
  369. if ( ctx.rowGroup ) {
  370. ctx.rowGroup.dataSrc( val );
  371. }
  372. } );
  373. } );
  374. // Attach a listener to the document which listens for DataTables initialisation
  375. // events so we can automatically initialise
  376. $(document).on( 'preInit.dt.dtrg', function (e, settings, json) {
  377. if ( e.namespace !== 'dt' ) {
  378. return;
  379. }
  380. var init = settings.oInit.rowGroup;
  381. var defaults = DataTable.defaults.rowGroup;
  382. if ( init || defaults ) {
  383. var opts = $.extend( {}, defaults, init );
  384. if ( init !== false ) {
  385. new RowGroup( settings, opts );
  386. }
  387. }
  388. } );
  389. return RowGroup;
  390. }));