暫無描述

dataTables.bootstrap5.mjs 4.3KB

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