dataTables.bootstrap.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. /*! DataTables Bootstrap 3 integration
  2. * ©2011-2015 SpryMedia Ltd - datatables.net/license
  3. */
  4. /**
  5. * DataTables integration for Bootstrap 3. This requires Bootstrap 3 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-6'l><'col-sm-6'f>>" +
  45. "<'row'<'col-sm-12'tr>>" +
  46. "<'row'<'col-sm-5'i><'col-sm-7'p>>",
  47. renderer: 'bootstrap'
  48. } );
  49. /* Default class modification */
  50. $.extend( DataTable.ext.classes, {
  51. sWrapper: "dataTables_wrapper form-inline dt-bootstrap",
  52. sFilterInput: "form-control input-sm",
  53. sLengthSelect: "form-control input-sm",
  54. sProcessing: "dataTables_processing panel panel-default"
  55. } );
  56. /* Bootstrap paging button renderer */
  57. DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) {
  58. var api = new DataTable.Api( settings );
  59. var classes = settings.oClasses;
  60. var lang = settings.oLanguage.oPaginate;
  61. var aria = settings.oLanguage.oAria.paginate || {};
  62. var btnDisplay, btnClass, counter=0;
  63. var attach = function( container, buttons ) {
  64. var i, ien, node, button;
  65. var clickHandler = function ( e ) {
  66. e.preventDefault();
  67. if ( !$(e.currentTarget).hasClass('disabled') && api.page() != e.data.action ) {
  68. api.page( e.data.action ).draw( 'page' );
  69. }
  70. };
  71. for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
  72. button = buttons[i];
  73. if ( $.isArray( button ) ) {
  74. attach( container, button );
  75. }
  76. else {
  77. btnDisplay = '';
  78. btnClass = '';
  79. switch ( button ) {
  80. case 'ellipsis':
  81. btnDisplay = '&#x2026;';
  82. btnClass = 'disabled';
  83. break;
  84. case 'first':
  85. btnDisplay = lang.sFirst;
  86. btnClass = button + (page > 0 ?
  87. '' : ' disabled');
  88. break;
  89. case 'previous':
  90. btnDisplay = lang.sPrevious;
  91. btnClass = button + (page > 0 ?
  92. '' : ' disabled');
  93. break;
  94. case 'next':
  95. btnDisplay = lang.sNext;
  96. btnClass = button + (page < pages-1 ?
  97. '' : ' disabled');
  98. break;
  99. case 'last':
  100. btnDisplay = lang.sLast;
  101. btnClass = button + (page < pages-1 ?
  102. '' : ' disabled');
  103. break;
  104. default:
  105. btnDisplay = button + 1;
  106. btnClass = page === button ?
  107. 'active' : '';
  108. break;
  109. }
  110. if ( btnDisplay ) {
  111. node = $('<li>', {
  112. 'class': classes.sPageButton+' '+btnClass,
  113. 'id': idx === 0 && typeof button === 'string' ?
  114. settings.sTableId +'_'+ button :
  115. null
  116. } )
  117. .append( $('<a>', {
  118. 'href': '#',
  119. 'aria-controls': settings.sTableId,
  120. 'aria-label': aria[ button ],
  121. 'data-dt-idx': counter,
  122. 'tabindex': settings.iTabIndex
  123. } )
  124. .html( btnDisplay )
  125. )
  126. .appendTo( container );
  127. settings.oApi._fnBindAction(
  128. node, {action: button}, clickHandler
  129. );
  130. counter++;
  131. }
  132. }
  133. }
  134. };
  135. // IE9 throws an 'unknown error' if document.activeElement is used
  136. // inside an iframe or frame.
  137. var activeEl;
  138. try {
  139. // Because this approach is destroying and recreating the paging
  140. // elements, focus is lost on the select button which is bad for
  141. // accessibility. So we want to restore focus once the draw has
  142. // completed
  143. activeEl = $(host).find(document.activeElement).data('dt-idx');
  144. }
  145. catch (e) {}
  146. attach(
  147. $(host).empty().html('<ul class="pagination"/>').children('ul'),
  148. buttons
  149. );
  150. if ( activeEl ) {
  151. $(host).find( '[data-dt-idx='+activeEl+']' ).focus();
  152. }
  153. };
  154. return DataTable;
  155. }));