datatable.js 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
  1. (function (global, factory) {
  2. if (typeof define === "function" && define.amd) {
  3. define("/tables/datatable", ["jquery", "Site"], factory);
  4. } else if (typeof exports !== "undefined") {
  5. factory(require("jquery"), require("Site"));
  6. } else {
  7. var mod = {
  8. exports: {}
  9. };
  10. factory(global.jQuery, global.Site);
  11. global.tablesDatatable = mod.exports;
  12. }
  13. })(this, function (_jquery, _Site) {
  14. "use strict";
  15. _jquery = babelHelpers.interopRequireDefault(_jquery);
  16. (0, _jquery.default)(document).ready(function ($$$1) {
  17. (0, _Site.run)();
  18. }); // Fixed Header Example
  19. // --------------------
  20. (function () {
  21. var offsetTop = 0;
  22. if ((0, _jquery.default)('.site-navbar').length > 0) {
  23. offsetTop = (0, _jquery.default)('.site-navbar').eq(0).innerHeight();
  24. } // initialize datatable
  25. var table = (0, _jquery.default)('#exampleFixedHeader').DataTable({
  26. responsive: true,
  27. fixedHeader: {
  28. header: true,
  29. headerOffset: offsetTop
  30. },
  31. "paging": false,
  32. "dom": "t" // just show table, no other controls
  33. }); // redraw fixedHeaders as necessary
  34. // $(window).resize(function() {
  35. // fixedHeader._fnUpdateClones(true);
  36. // fixedHeader._fnUpdatePositions();
  37. // });
  38. })(); // Individual column searching
  39. // ---------------------------
  40. (function () {
  41. (0, _jquery.default)(document).ready(function () {
  42. var defaults = Plugin.getDefaults("dataTable");
  43. var options = _jquery.default.extend(true, {}, defaults, {
  44. initComplete: function initComplete() {
  45. this.api().columns().every(function () {
  46. var column = this;
  47. var select = (0, _jquery.default)('<select class="form-control w-full"><option value=""></option></select>').appendTo((0, _jquery.default)(column.footer()).empty()).on('change', function () {
  48. var val = _jquery.default.fn.dataTable.util.escapeRegex((0, _jquery.default)(this).val());
  49. column.search(val ? '^' + val + '$' : '', true, false).draw();
  50. });
  51. column.data().unique().sort().each(function (d, j) {
  52. select.append('<option value="' + d + '">' + d + '</option>');
  53. });
  54. });
  55. }
  56. });
  57. (0, _jquery.default)('#exampleTableSearch').DataTable(options);
  58. });
  59. })(); // Table Tools
  60. // -----------
  61. (function () {
  62. (0, _jquery.default)(document).ready(function () {
  63. var defaults = Plugin.getDefaults("dataTable");
  64. var options = _jquery.default.extend(true, {}, defaults, {
  65. "aoColumnDefs": [{
  66. 'bSortable': false,
  67. 'aTargets': [-1]
  68. }],
  69. "iDisplayLength": 5,
  70. "aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
  71. "sDom": '<"dt-panelmenu clearfix"Bfr>t<"dt-panelfooter clearfix"ip>',
  72. "buttons": ['copy', 'excel', 'csv', 'pdf', 'print']
  73. });
  74. (0, _jquery.default)('#exampleTableTools').dataTable(options);
  75. });
  76. })(); // Table Add Row
  77. // -------------
  78. (function ($$$1) {
  79. var EditableTable = {
  80. options: {
  81. addButton: '#addToTable',
  82. table: '#exampleAddRow',
  83. dialog: {
  84. wrapper: '#dialog',
  85. cancelButton: '#dialogCancel',
  86. confirmButton: '#dialogConfirm'
  87. }
  88. },
  89. initialize: function initialize() {
  90. this.setVars().build().events();
  91. },
  92. setVars: function setVars() {
  93. this.$table = $$$1(this.options.table);
  94. this.$addButton = $$$1(this.options.addButton); // dialog
  95. this.dialog = {};
  96. this.dialog.$wrapper = $$$1(this.options.dialog.wrapper);
  97. this.dialog.$cancel = $$$1(this.options.dialog.cancelButton);
  98. this.dialog.$confirm = $$$1(this.options.dialog.confirmButton);
  99. return this;
  100. },
  101. build: function build() {
  102. this.datatable = this.$table.DataTable({
  103. aoColumns: [null, null, null, {
  104. "bSortable": false
  105. }],
  106. language: {
  107. "sSearchPlaceholder": "Search..",
  108. "lengthMenu": "_MENU_",
  109. "search": "_INPUT_"
  110. }
  111. });
  112. window.dt = this.datatable;
  113. return this;
  114. },
  115. events: function events() {
  116. var _self = this;
  117. this.$table.on('click', 'a.save-row', function (e) {
  118. e.preventDefault();
  119. _self.rowSave($$$1(this).closest('tr'));
  120. }).on('click', 'a.cancel-row', function (e) {
  121. e.preventDefault();
  122. _self.rowCancel($$$1(this).closest('tr'));
  123. }).on('click', 'a.edit-row', function (e) {
  124. e.preventDefault();
  125. _self.rowEdit($$$1(this).closest('tr'));
  126. }).on('click', 'a.remove-row', function (e) {
  127. e.preventDefault();
  128. var $row = $$$1(this).closest('tr');
  129. bootbox.dialog({
  130. message: "Are you sure that you want to delete this row?",
  131. title: "ARE YOU SURE?",
  132. buttons: {
  133. danger: {
  134. label: "Confirm",
  135. className: "btn-danger",
  136. callback: function callback() {
  137. _self.rowRemove($row);
  138. }
  139. },
  140. main: {
  141. label: "Cancel",
  142. className: "btn-primary",
  143. callback: function callback() {}
  144. }
  145. }
  146. });
  147. });
  148. this.$addButton.on('click', function (e) {
  149. e.preventDefault();
  150. _self.rowAdd();
  151. });
  152. this.dialog.$cancel.on('click', function (e) {
  153. e.preventDefault();
  154. $$$1.magnificPopup.close();
  155. });
  156. return this;
  157. },
  158. // =============
  159. // ROW FUNCTIONS
  160. // =============
  161. rowAdd: function rowAdd() {
  162. this.$addButton.attr({
  163. 'disabled': 'disabled'
  164. });
  165. var actions, data, $row;
  166. actions = ['<a href="#" class="btn btn-sm btn-icon btn-pure btn-default on-editing save-row" data-toggle="tooltip" data-original-title="Save" hidden><i class="icon wb-check" aria-hidden="true"></i></a>', '<a href="#" class="btn btn-sm btn-icon btn-pure btn-default on-editing cancel-row" data-toggle="tooltip" data-original-title="Delete" hidden><i class="icon wb-close" aria-hidden="true"></i></a>', '<a href="#" class="btn btn-sm btn-icon btn-pure btn-default on-default edit-row" data-toggle="tooltip" data-original-title="Edit"><i class="icon wb-edit" aria-hidden="true"></i></a>', '<a href="#" class="btn btn-sm btn-icon btn-pure btn-default on-default remove-row" data-toggle="tooltip" data-original-title="Remove"><i class="icon wb-trash" aria-hidden="true"></i></a>'].join(' ');
  167. data = this.datatable.row.add(['', '', '', actions]);
  168. $row = this.datatable.row(data[0]).nodes().to$();
  169. $row.addClass('adding').find('td:last').addClass('actions');
  170. this.rowEdit($row);
  171. this.datatable.order([0, 'asc']).draw(); // always show fields
  172. },
  173. rowCancel: function rowCancel($row) {
  174. var _self = this,
  175. $actions,
  176. i,
  177. data,
  178. $cancel;
  179. if ($row.hasClass('adding')) {
  180. this.rowRemove($row);
  181. } else {
  182. $actions = $row.find('td.actions');
  183. $cancel = $actions.find('.cancel-row');
  184. $cancel.tooltip('hide');
  185. if ($actions.get(0)) {
  186. this.rowSetActionsDefault($row);
  187. }
  188. data = this.datatable.row($row.get(0)).data();
  189. this.datatable.row($row.get(0)).data(data);
  190. this.handleTooltip($row);
  191. this.datatable.draw();
  192. }
  193. },
  194. rowEdit: function rowEdit($row) {
  195. var _self = this,
  196. data;
  197. data = this.datatable.row($row.get(0)).data();
  198. $row.children('td').each(function (i) {
  199. var $this = $$$1(this);
  200. if ($this.hasClass('actions')) {
  201. _self.rowSetActionsEditing($row);
  202. } else {
  203. $this.html('<input type="text" class="form-control input-block" value="' + data[i] + '"/>');
  204. }
  205. });
  206. },
  207. rowSave: function rowSave($row) {
  208. var _self = this,
  209. $actions,
  210. values = [],
  211. $save;
  212. if ($row.hasClass('adding')) {
  213. this.$addButton.removeAttr('disabled');
  214. $row.removeClass('adding');
  215. }
  216. values = $row.find('td').map(function () {
  217. var $this = $$$1(this);
  218. if ($this.hasClass('actions')) {
  219. _self.rowSetActionsDefault($row);
  220. return _self.datatable.cell(this).data();
  221. } else {
  222. return $$$1.trim($this.find('input').val());
  223. }
  224. });
  225. $actions = $row.find('td.actions');
  226. $save = $actions.find('.save-row');
  227. $save.tooltip('hide');
  228. if ($actions.get(0)) {
  229. this.rowSetActionsDefault($row);
  230. }
  231. this.datatable.row($row.get(0)).data(values);
  232. this.handleTooltip($row);
  233. this.datatable.draw();
  234. },
  235. rowRemove: function rowRemove($row) {
  236. if ($row.hasClass('adding')) {
  237. this.$addButton.removeAttr('disabled');
  238. }
  239. this.datatable.row($row.get(0)).remove().draw();
  240. },
  241. rowSetActionsEditing: function rowSetActionsEditing($row) {
  242. $row.find('.on-editing').removeAttr('hidden');
  243. $row.find('.on-default').attr('hidden', true);
  244. },
  245. rowSetActionsDefault: function rowSetActionsDefault($row) {
  246. $row.find('.on-editing').attr('hidden', true);
  247. $row.find('.on-default').removeAttr('hidden');
  248. },
  249. handleTooltip: function handleTooltip($row) {
  250. var $tooltip = $row.find('[data-toggle="tooltip"]');
  251. $tooltip.tooltip();
  252. }
  253. };
  254. $$$1(function () {
  255. EditableTable.initialize();
  256. });
  257. }).apply(undefined, [jQuery]);
  258. });