amazeui.datatables.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. /*! DataTables Amaze UI 2.x integration */
  2. /**
  3. * DataTables integration for Amaze UI 2.x. This requires Amaze UI 2.x and
  4. * DataTables 1.10 or newer.
  5. */
  6. 'use strict';
  7. var $ = require('jquery');
  8. var DataTable = require('datatables');
  9. // language
  10. // https://github.com/DataTables/Plugins/blob/master/i18n/Chinese.lang
  11. DataTable.defaults.oLanguage = {
  12. sProcessing: "处理中...",
  13. sLengthMenu: "显示 _MENU_ 项结果",
  14. sZeroRecords: "没有匹配结果",
  15. sInfo: "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
  16. sInfoEmpty: "显示第 0 至 0 项结果,共 0 项",
  17. sInfoFiltered: "(由 _MAX_ 项结果过滤)",
  18. sInfoPostFix: "",
  19. sSearch: "搜索:",
  20. sUrl: "",
  21. sEmptyTable: "表中数据为空",
  22. sLoadingRecords: "载入中...",
  23. sInfoThousands: ",",
  24. oPaginate: {
  25. sFirst: "首页",
  26. sPrevious: "上页",
  27. sNext: "下页",
  28. sLast: "末页"
  29. },
  30. oAria: {
  31. sSortAscending: ": 以升序排列此列",
  32. sSortDescending: ": 以降序排列此列"
  33. }
  34. };
  35. // Set the defaults for DataTables initialisation
  36. // https://datatables.net/reference/option/dom
  37. $.extend(true, DataTable.defaults, {
  38. dom: "<'am-g am-datatable-hd'<'am-u-sm-6'l><'am-u-sm-6'f>>" +
  39. "<'am-g'<'am-u-sm-12'tr>>" +
  40. "<'am-g am-datatable-footer'<'am-u-sm-5'i><'am-u-sm-7'p>>",
  41. renderer: 'amazeui'
  42. });
  43. /* Default class modification */
  44. $.extend(DataTable.ext.classes, {
  45. /* Features */
  46. sWrapper: 'dataTables_wrapper am-datatable am-form-inline dt-amazeui',
  47. sFilter: 'dataTables_filter am-datatable-filter',
  48. sFilterInput: 'am-form-field am-input-sm',
  49. sInfo: 'dataTables_info am-datatable-info',
  50. sPaging: 'dataTables_paginate paging_', /* Note that the type is postfixed */
  51. sLength: 'dataTables_length am-form-group am-datatable-length',
  52. sLengthSelect: 'am-form-select am-input-sm',
  53. sProcessing: "dataTables_processing",
  54. /* Sorting */
  55. sSortAsc: "sorting_asc",
  56. sSortDesc: "sorting_desc",
  57. sSortable: "sorting", /* Sortable in both directions */
  58. sSortableAsc: "sorting_asc_disabled",
  59. sSortableDesc: "sorting_desc_disabled",
  60. sSortableNone: "sorting_disabled",
  61. sSortColumn: "sorting_" /* Note that an int is postfixed for the sorting order */
  62. });
  63. /* Amaze UI paging button renderer */
  64. DataTable.ext.renderer.pageButton.amazeui = function(settings, host, idx, buttons, page, pages) {
  65. var api = new DataTable.Api(settings);
  66. var classes = settings.oClasses;
  67. var lang = settings.oLanguage.oPaginate;
  68. var btnDisplay, btnClass, counter = 0;
  69. var attach = function(container, buttons) {
  70. var i, ien, node, button;
  71. var clickHandler = function(e) {
  72. e.preventDefault();
  73. if (!$(e.currentTarget).hasClass('am-disabled')) {
  74. api.page(e.data.action).draw(false);
  75. }
  76. };
  77. for (i = 0, ien = buttons.length; i < ien; i++) {
  78. button = buttons[i];
  79. if ($.isArray(button)) {
  80. attach(container, button);
  81. }
  82. else {
  83. btnDisplay = '';
  84. btnClass = '';
  85. switch (button) {
  86. case 'ellipsis':
  87. btnDisplay = '&hellip;';
  88. btnClass = 'am-disabled';
  89. break;
  90. case 'first':
  91. btnDisplay = lang.sFirst;
  92. btnClass = button + (page > 0 ?
  93. '' : ' am-disabled');
  94. break;
  95. case 'previous':
  96. btnDisplay = lang.sPrevious;
  97. btnClass = button + (page > 0 ?
  98. '' : ' am-disabled');
  99. break;
  100. case 'next':
  101. btnDisplay = lang.sNext;
  102. btnClass = button + (page < pages - 1 ?
  103. '' : ' am-disabled');
  104. break;
  105. case 'last':
  106. btnDisplay = lang.sLast;
  107. btnClass = button + (page < pages - 1 ?
  108. '' : ' am-disabled');
  109. break;
  110. default:
  111. btnDisplay = button + 1;
  112. btnClass = page === button ?
  113. 'am-active' : '';
  114. break;
  115. }
  116. if (btnDisplay) {
  117. node = $('<li>', {
  118. 'class': classes.sPageButton + ' ' + btnClass,
  119. 'id': idx === 0 && typeof button === 'string' ?
  120. settings.sTableId + '_' + button :
  121. null
  122. })
  123. .append($('<a>', {
  124. 'href': '#',
  125. 'aria-controls': settings.sTableId,
  126. 'data-dt-idx': counter,
  127. 'tabindex': settings.iTabIndex
  128. })
  129. .html(btnDisplay)
  130. )
  131. .appendTo(container);
  132. settings.oApi._fnBindAction(
  133. node, {action: button}, clickHandler
  134. );
  135. counter++;
  136. }
  137. }
  138. }
  139. };
  140. // IE9 throws an 'unknown error' if document.activeElement is used
  141. // inside an iframe or frame.
  142. var activeEl;
  143. try {
  144. // Because this approach is destroying and recreating the paging
  145. // elements, focus is lost on the select button which is bad for
  146. // accessibility. So we want to restore focus once the draw has
  147. // completed
  148. activeEl = $(document.activeElement).data('dt-idx');
  149. } catch (e) {
  150. }
  151. attach(
  152. $(host).empty().
  153. html('<ul class="am-datatable-pager am-pagination am-pagination-right am-text-sm"/>').
  154. children('ul'),
  155. buttons
  156. );
  157. if (activeEl) {
  158. $(host).find('[data-dt-idx=' + activeEl + ']').focus();
  159. }
  160. };
  161. /*
  162. * TableTools Amaze UI compatibility
  163. * Required TableTools 2.1+
  164. */
  165. if (DataTable.TableTools) {
  166. // Set the classes that TableTools uses to something suitable for Bootstrap
  167. $.extend(true, DataTable.TableTools.classes, {
  168. container: "DTTT am-btn-group",
  169. buttons: {
  170. normal: "am-btn am-btn-default",
  171. disabled: "am-disabled"
  172. },
  173. collection: {
  174. container: "DTTT_dropdown dropdown-menu",
  175. buttons: {
  176. normal: "",
  177. disabled: "am-disabled"
  178. }
  179. },
  180. print: {
  181. info: "DTTT_print_info"
  182. },
  183. select: {
  184. row: "am-active"
  185. }
  186. });
  187. // Have the collection use a bootstrap compatible drop down
  188. $.extend(true, DataTable.TableTools.DEFAULTS.oTags, {
  189. collection: {
  190. container: "ul",
  191. button: "li",
  192. liner: "a"
  193. }
  194. });
  195. }
  196. module.exports = DataTable;