25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.

buttons.colVis.js 6.0KB

2 yıl önce
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. /*!
  2. * Column visibility buttons for Buttons and DataTables.
  3. * 2016 SpryMedia Ltd - datatables.net/license
  4. */
  5. (function( factory ){
  6. if ( typeof define === 'function' && define.amd ) {
  7. // AMD
  8. define( ['jquery', 'datatables.net', 'datatables.net-buttons'], function ( $ ) {
  9. return factory( $, window, document );
  10. } );
  11. }
  12. else if ( typeof exports === 'object' ) {
  13. // CommonJS
  14. module.exports = function (root, $) {
  15. if ( ! root ) {
  16. root = window;
  17. }
  18. if ( ! $ || ! $.fn.dataTable ) {
  19. $ = require('datatables.net')(root, $).$;
  20. }
  21. if ( ! $.fn.dataTable.Buttons ) {
  22. require('datatables.net-buttons')(root, $);
  23. }
  24. return factory( $, root, root.document );
  25. };
  26. }
  27. else {
  28. // Browser
  29. factory( jQuery, window, document );
  30. }
  31. }(function( $, window, document, undefined ) {
  32. 'use strict';
  33. var DataTable = $.fn.dataTable;
  34. $.extend( DataTable.ext.buttons, {
  35. // A collection of column visibility buttons
  36. colvis: function ( dt, conf ) {
  37. var node = null;
  38. var buttonConf = {
  39. extend: 'collection',
  40. init: function ( dt, n ) {
  41. node = n;
  42. },
  43. text: function ( dt ) {
  44. return dt.i18n( 'buttons.colvis', 'Column visibility' );
  45. },
  46. className: 'buttons-colvis',
  47. closeButton: false,
  48. buttons: [ {
  49. extend: 'columnsToggle',
  50. columns: conf.columns,
  51. columnText: conf.columnText
  52. } ]
  53. };
  54. // Rebuild the collection with the new column structure if columns are reordered
  55. dt.on( 'column-reorder.dt'+conf.namespace, function (e, settings, details) {
  56. // console.log(node);
  57. // console.log('node', dt.button(null, node).node());
  58. dt.button(null, dt.button(null, node).node()).collectionRebuild([{
  59. extend: 'columnsToggle',
  60. columns: conf.columns,
  61. columnText: conf.columnText
  62. }]);
  63. });
  64. return buttonConf;
  65. },
  66. // Selected columns with individual buttons - toggle column visibility
  67. columnsToggle: function ( dt, conf ) {
  68. var columns = dt.columns( conf.columns ).indexes().map( function ( idx ) {
  69. return {
  70. extend: 'columnToggle',
  71. columns: idx,
  72. columnText: conf.columnText
  73. };
  74. } ).toArray();
  75. return columns;
  76. },
  77. // Single button to toggle column visibility
  78. columnToggle: function ( dt, conf ) {
  79. return {
  80. extend: 'columnVisibility',
  81. columns: conf.columns,
  82. columnText: conf.columnText
  83. };
  84. },
  85. // Selected columns with individual buttons - set column visibility
  86. columnsVisibility: function ( dt, conf ) {
  87. var columns = dt.columns( conf.columns ).indexes().map( function ( idx ) {
  88. return {
  89. extend: 'columnVisibility',
  90. columns: idx,
  91. visibility: conf.visibility,
  92. columnText: conf.columnText
  93. };
  94. } ).toArray();
  95. return columns;
  96. },
  97. // Single button to set column visibility
  98. columnVisibility: {
  99. columns: undefined, // column selector
  100. text: function ( dt, button, conf ) {
  101. return conf._columnText( dt, conf );
  102. },
  103. className: 'buttons-columnVisibility',
  104. action: function ( e, dt, button, conf ) {
  105. var col = dt.columns( conf.columns );
  106. var curr = col.visible();
  107. col.visible( conf.visibility !== undefined ?
  108. conf.visibility :
  109. ! (curr.length ? curr[0] : false )
  110. );
  111. },
  112. init: function ( dt, button, conf ) {
  113. var that = this;
  114. button.attr( 'data-cv-idx', conf.columns );
  115. dt
  116. .on( 'column-visibility.dt'+conf.namespace, function (e, settings) {
  117. if ( ! settings.bDestroying && settings.nTable == dt.settings()[0].nTable ) {
  118. that.active( dt.column( conf.columns ).visible() );
  119. }
  120. } )
  121. .on( 'column-reorder.dt'+conf.namespace, function (e, settings, details) {
  122. // Button has been removed from the DOM
  123. if ( conf.destroying ) {
  124. return;
  125. }
  126. if ( dt.columns( conf.columns ).count() !== 1 ) {
  127. return;
  128. }
  129. // This button controls the same column index but the text for the column has
  130. // changed
  131. that.text( conf._columnText( dt, conf ) );
  132. // Since its a different column, we need to check its visibility
  133. that.active( dt.column( conf.columns ).visible() );
  134. } );
  135. this.active( dt.column( conf.columns ).visible() );
  136. },
  137. destroy: function ( dt, button, conf ) {
  138. dt
  139. .off( 'column-visibility.dt'+conf.namespace )
  140. .off( 'column-reorder.dt'+conf.namespace );
  141. },
  142. _columnText: function ( dt, conf ) {
  143. // Use DataTables' internal data structure until this is presented
  144. // is a public API. The other option is to use
  145. // `$( column(col).node() ).text()` but the node might not have been
  146. // populated when Buttons is constructed.
  147. var idx = dt.column( conf.columns ).index();
  148. var title = dt.settings()[0].aoColumns[ idx ].sTitle;
  149. if (! title) {
  150. title = dt.column(idx).header().innerHTML;
  151. }
  152. title = title
  153. .replace(/\n/g," ") // remove new lines
  154. .replace(/<br\s*\/?>/gi, " ") // replace line breaks with spaces
  155. .replace(/<select(.*?)<\/select>/g, "") // remove select tags, including options text
  156. .replace(/<!\-\-.*?\-\->/g, "") // strip HTML comments
  157. .replace(/<.*?>/g, "") // strip HTML
  158. .replace(/^\s+|\s+$/g,""); // trim
  159. return conf.columnText ?
  160. conf.columnText( dt, idx, title ) :
  161. title;
  162. }
  163. },
  164. colvisRestore: {
  165. className: 'buttons-colvisRestore',
  166. text: function ( dt ) {
  167. return dt.i18n( 'buttons.colvisRestore', 'Restore visibility' );
  168. },
  169. init: function ( dt, button, conf ) {
  170. conf._visOriginal = dt.columns().indexes().map( function ( idx ) {
  171. return dt.column( idx ).visible();
  172. } ).toArray();
  173. },
  174. action: function ( e, dt, button, conf ) {
  175. dt.columns().every( function ( i ) {
  176. // Take into account that ColReorder might have disrupted our
  177. // indexes
  178. var idx = dt.colReorder && dt.colReorder.transpose ?
  179. dt.colReorder.transpose( i, 'toOriginal' ) :
  180. i;
  181. this.visible( conf._visOriginal[ idx ] );
  182. } );
  183. }
  184. },
  185. colvisGroup: {
  186. className: 'buttons-colvisGroup',
  187. action: function ( e, dt, button, conf ) {
  188. dt.columns( conf.show ).visible( true, false );
  189. dt.columns( conf.hide ).visible( false, false );
  190. dt.columns.adjust();
  191. },
  192. show: [],
  193. hide: []
  194. }
  195. } );
  196. return DataTable.Buttons;
  197. }));