dataTables.rowGroup.js 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471
  1. /*! RowGroup 1.1.0
  2. * ©2017-2018 SpryMedia Ltd - datatables.net/license
  3. */
  4. /**
  5. * @summary RowGroup
  6. * @description RowGrouping for DataTables
  7. * @version 1.1.0
  8. * @file dataTables.rowGroup.js
  9. * @author SpryMedia Ltd (www.sprymedia.co.uk)
  10. * @contact datatables.net
  11. * @copyright Copyright 2017-2018 SpryMedia Ltd.
  12. *
  13. * This source file is free software, available under the following license:
  14. * MIT license - http://datatables.net/license/mit
  15. *
  16. * This source file is distributed in the hope that it will be useful, but
  17. * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
  18. * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
  19. *
  20. * For details please refer to: http://www.datatables.net
  21. */
  22. (function( factory ){
  23. if ( typeof define === 'function' && define.amd ) {
  24. // AMD
  25. define( ['jquery', 'datatables.net'], function ( $ ) {
  26. return factory( $, window, document );
  27. } );
  28. }
  29. else if ( typeof exports === 'object' ) {
  30. // CommonJS
  31. module.exports = function (root, $) {
  32. if ( ! root ) {
  33. root = window;
  34. }
  35. if ( ! $ || ! $.fn.dataTable ) {
  36. $ = require('datatables.net')(root, $).$;
  37. }
  38. return factory( $, root, root.document );
  39. };
  40. }
  41. else {
  42. // Browser
  43. factory( jQuery, window, document );
  44. }
  45. }(function( $, window, document, undefined ) {
  46. 'use strict';
  47. var DataTable = $.fn.dataTable;
  48. var 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. for ( var i=0, ien=rows.length ; i<ien ; i++ ) {
  197. var rowIndex = rows[i];
  198. var rowData = dt.row( rowIndex ).data();
  199. var group = fn( rowData );
  200. if ( group === null || group === undefined ) {
  201. group = that.c.emptyDataGroup;
  202. }
  203. if ( last === undefined || group !== last ) {
  204. data.push( {
  205. dataPoint: group,
  206. rows: []
  207. } );
  208. last = group;
  209. }
  210. data[ data.length-1 ].rows.push( rowIndex );
  211. }
  212. if ( fns[ level+1 ] !== undefined ) {
  213. for ( var i=0, ien=data.length ; i<ien ; i++ ) {
  214. data[i].children = this._group( level+1, data[i].rows );
  215. }
  216. }
  217. return data;
  218. },
  219. /**
  220. * Row group display - insert the rows into the document
  221. * @param {number} level Nesting level
  222. * @param {object[]} groups Takes the nested array from `_group`
  223. * @private
  224. */
  225. _groupDisplay: function ( level, groups )
  226. {
  227. var dt = this.s.dt;
  228. var display;
  229. for ( var i=0, ien=groups.length ; i<ien ; i++ ) {
  230. var group = groups[i];
  231. var groupName = group.dataPoint;
  232. var row;
  233. var rows = group.rows;
  234. if ( this.c.startRender ) {
  235. display = this.c.startRender.call( this, dt.rows(rows), groupName, level );
  236. row = this._rowWrap( display, this.c.startClassName, level );
  237. if ( row ) {
  238. row.insertBefore( dt.row( rows[0] ).node() );
  239. }
  240. }
  241. if ( this.c.endRender ) {
  242. display = this.c.endRender.call( this, dt.rows(rows), groupName, level );
  243. row = this._rowWrap( display, this.c.endClassName, level );
  244. if ( row ) {
  245. row.insertAfter( dt.row( rows[ rows.length-1 ] ).node() );
  246. }
  247. }
  248. if ( group.children ) {
  249. this._groupDisplay( level+1, group.children );
  250. }
  251. }
  252. },
  253. /**
  254. * Take a rendered value from an end user and make it suitable for display
  255. * as a row, by wrapping it in a row, or detecting that it is a row.
  256. * @param {node|jQuery|string} display Display value
  257. * @param {string} className Class to add to the row
  258. * @param {array} group
  259. * @param {number} group level
  260. * @private
  261. */
  262. _rowWrap: function ( display, className, level )
  263. {
  264. var row;
  265. if ( display === null || display === '' ) {
  266. display = this.c.emptyDataGroup;
  267. }
  268. if ( display === undefined ) {
  269. return null;
  270. }
  271. if ( typeof display === 'object' && display.nodeName && display.nodeName.toLowerCase() === 'tr') {
  272. row = $(display);
  273. }
  274. else if (display instanceof $ && display.length && display[0].nodeName.toLowerCase() === 'tr') {
  275. row = display;
  276. }
  277. else {
  278. row = $('<tr/>')
  279. .append(
  280. $('<td/>')
  281. .attr( 'colspan', this._colspan() )
  282. .append( display )
  283. );
  284. }
  285. return row
  286. .addClass( this.c.className )
  287. .addClass( className )
  288. .addClass( 'dtrg-level-'+level );
  289. }
  290. } );
  291. /**
  292. * RowGroup default settings for initialisation
  293. *
  294. * @namespace
  295. * @name RowGroup.defaults
  296. * @static
  297. */
  298. RowGroup.defaults = {
  299. /**
  300. * Class to apply to grouping rows - applied to both the start and
  301. * end grouping rows.
  302. * @type string
  303. */
  304. className: 'dtrg-group',
  305. /**
  306. * Data property from which to read the grouping information
  307. * @type string|integer|array
  308. */
  309. dataSrc: 0,
  310. /**
  311. * Text to show if no data is found for a group
  312. * @type string
  313. */
  314. emptyDataGroup: 'No group',
  315. /**
  316. * Initial enablement state
  317. * @boolean
  318. */
  319. enable: true,
  320. /**
  321. * Class name to give to the end grouping row
  322. * @type string
  323. */
  324. endClassName: 'dtrg-end',
  325. /**
  326. * End grouping label function
  327. * @function
  328. */
  329. endRender: null,
  330. /**
  331. * Class name to give to the start grouping row
  332. * @type string
  333. */
  334. startClassName: 'dtrg-start',
  335. /**
  336. * Start grouping label function
  337. * @function
  338. */
  339. startRender: function ( rows, group ) {
  340. return group;
  341. }
  342. };
  343. RowGroup.version = "1.1.0";
  344. $.fn.dataTable.RowGroup = RowGroup;
  345. $.fn.DataTable.RowGroup = RowGroup;
  346. DataTable.Api.register( 'rowGroup()', function () {
  347. return this;
  348. } );
  349. DataTable.Api.register( 'rowGroup().disable()', function () {
  350. return this.iterator( 'table', function (ctx) {
  351. if ( ctx.rowGroup ) {
  352. ctx.rowGroup.enable( false );
  353. }
  354. } );
  355. } );
  356. DataTable.Api.register( 'rowGroup().enable()', function ( opts ) {
  357. return this.iterator( 'table', function (ctx) {
  358. if ( ctx.rowGroup ) {
  359. ctx.rowGroup.enable( opts === undefined ? true : opts );
  360. }
  361. } );
  362. } );
  363. DataTable.Api.register( 'rowGroup().dataSrc()', function ( val ) {
  364. if ( val === undefined ) {
  365. return this.context[0].rowGroup.dataSrc();
  366. }
  367. return this.iterator( 'table', function (ctx) {
  368. if ( ctx.rowGroup ) {
  369. ctx.rowGroup.dataSrc( val );
  370. }
  371. } );
  372. } );
  373. // Attach a listener to the document which listens for DataTables initialisation
  374. // events so we can automatically initialise
  375. $(document).on( 'preInit.dt.dtrg', function (e, settings, json) {
  376. if ( e.namespace !== 'dt' ) {
  377. return;
  378. }
  379. var init = settings.oInit.rowGroup;
  380. var defaults = DataTable.defaults.rowGroup;
  381. if ( init || defaults ) {
  382. var opts = $.extend( {}, defaults, init );
  383. if ( init !== false ) {
  384. new RowGroup( settings, opts );
  385. }
  386. }
  387. } );
  388. return RowGroup;
  389. }));