You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

dataTables.bootstrap4.js 6.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. /*! DataTables Bootstrap 4 integration
  2. * ©2011-2017 SpryMedia Ltd - datatables.net/license
  3. */
  4. /**
  5. * DataTables integration for Bootstrap 4. This requires Bootstrap 4 and
  6. * DataTables 1.10 or newer.
  7. *
  8. * This file sets the defaults and adds options to DataTables to style its
  9. * controls using Bootstrap. See http://datatables.net/manual/styling/bootstrap
  10. * for further information.
  11. */
  12. (function (factory) {
  13. if (typeof define === 'function' && define.amd) {
  14. // AMD
  15. define(['jquery', 'datatables.net'], function ($) {
  16. return factory($, window, document);
  17. });
  18. } else if (typeof exports === 'object') {
  19. // CommonJS
  20. module.exports = function (root, $) {
  21. if (!root) {
  22. root = window;
  23. }
  24. if (!$ || !$.fn.dataTable) {
  25. // Require DataTables, which attaches to jQuery, including
  26. // jQuery if needed and have a $ property so we can access the
  27. // jQuery object that is used
  28. $ = require('datatables.net')(root, $).$;
  29. }
  30. return factory($, root, root.document);
  31. };
  32. } else {
  33. // Browser
  34. factory(jQuery, window, document);
  35. }
  36. }(function ($, window, document, undefined) {
  37. 'use strict';
  38. var DataTable = $.fn.dataTable;
  39. /* Set the defaults for DataTables initialisation */
  40. $.extend(true, DataTable.defaults, {
  41. dom:
  42. "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
  43. "<'row'<'col-sm-12'tr>>" +
  44. "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
  45. renderer: 'bootstrap'
  46. });
  47. /* Default class modification */
  48. $.extend(DataTable.ext.classes, {
  49. sWrapper: "dataTables_wrapper dt-bootstrap4",
  50. sFilterInput: "form-control form-control-sm",
  51. sLengthSelect: "custom-select custom-select-sm form-control form-control-sm",
  52. sProcessing: "dataTables_processing card",
  53. sPageButton: "paginate_button page-item"
  54. });
  55. /* Bootstrap paging button renderer */
  56. DataTable.ext.renderer.pageButton.bootstrap = function (settings, host, idx, buttons, page, pages) {
  57. var api = new DataTable.Api(settings);
  58. var classes = settings.oClasses;
  59. var lang = settings.oLanguage.oPaginate;
  60. var aria = settings.oLanguage.oAria.paginate || {};
  61. var btnDisplay, btnClass, counter = 0;
  62. var attach = function (container, buttons) {
  63. var i, ien, node, button;
  64. var clickHandler = function (e) {
  65. e.preventDefault();
  66. if (!$(e.currentTarget).hasClass('disabled') && api.page() != e.data.action) {
  67. api.page(e.data.action).draw('page');
  68. }
  69. };
  70. for (i = 0, ien = buttons.length; i < ien; i++) {
  71. button = buttons[i];
  72. if (Array.isArray(button)) {
  73. attach(container, button);
  74. } else {
  75. btnDisplay = '';
  76. btnClass = '';
  77. switch (button) {
  78. case 'ellipsis':
  79. btnDisplay = '&#x2026;';
  80. btnClass = 'disabled';
  81. break;
  82. case 'first':
  83. btnDisplay = lang.sFirst;
  84. btnClass = button + (page > 0 ?
  85. '' : ' disabled');
  86. break;
  87. case 'previous':
  88. btnDisplay = lang.sPrevious;
  89. btnClass = button + (page > 0 ?
  90. '' : ' disabled');
  91. break;
  92. case 'next':
  93. btnDisplay = lang.sNext;
  94. btnClass = button + (page < pages - 1 ?
  95. '' : ' disabled');
  96. break;
  97. case 'last':
  98. btnDisplay = lang.sLast;
  99. btnClass = button + (page < pages - 1 ?
  100. '' : ' disabled');
  101. break;
  102. default:
  103. btnDisplay = button + 1;
  104. btnClass = page === button ?
  105. 'active' : '';
  106. break;
  107. }
  108. if (btnDisplay) {
  109. node = $('<li>', {
  110. 'class': classes.sPageButton + ' ' + btnClass,
  111. 'id': idx === 0 && typeof button === 'string' ?
  112. settings.sTableId + '_' + button :
  113. null
  114. })
  115. .append($('<a>', {
  116. 'href': '#',
  117. 'aria-controls': settings.sTableId,
  118. 'aria-label': aria[button],
  119. 'data-dt-idx': counter,
  120. 'tabindex': settings.iTabIndex,
  121. 'class': 'page-link'
  122. })
  123. .html(btnDisplay)
  124. )
  125. .appendTo(container);
  126. settings.oApi._fnBindAction(
  127. node, {action: button}, clickHandler
  128. );
  129. counter++;
  130. }
  131. }
  132. }
  133. };
  134. // IE9 throws an 'unknown error' if document.activeElement is used
  135. // inside an iframe or frame.
  136. var activeEl;
  137. try {
  138. // Because this approach is destroying and recreating the paging
  139. // elements, focus is lost on the select button which is bad for
  140. // accessibility. So we want to restore focus once the draw has
  141. // completed
  142. activeEl = $(host).find(document.activeElement).data('dt-idx');
  143. } catch (e) {
  144. }
  145. attach(
  146. $(host).empty().html('<ul class="pagination"/>').children('ul'),
  147. buttons
  148. );
  149. if (activeEl !== undefined) {
  150. $(host).find('[data-dt-idx=' + activeEl + ']').trigger('focus');
  151. }
  152. };
  153. return DataTable;
  154. }));