dataTables.bootstrap4.js 4.6 KB

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