dataTables.bootstrap.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. /*! DataTables Bootstrap 3 integration
  2. * ©2011-2014 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(window, document, undefined){
  13. var factory = function( $, DataTable ) {
  14. "use strict";
  15. /* Set the defaults for DataTables initialisation */
  16. $.extend( true, DataTable.defaults, {
  17. dom:
  18. "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
  19. "<'row'<'col-sm-12'tr>>" +
  20. "<'row'<'col-sm-5'i><'col-sm-7'p>>",
  21. renderer: 'bootstrap'
  22. } );
  23. /* Default class modification */
  24. $.extend( DataTable.ext.classes, {
  25. sWrapper: "dataTables_wrapper form-inline dt-bootstrap",
  26. sFilterInput: "form-control input-sm",
  27. sLengthSelect: "form-control input-sm"
  28. } );
  29. /* Bootstrap paging button renderer */
  30. DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) {
  31. var api = new DataTable.Api( settings );
  32. var classes = settings.oClasses;
  33. var lang = settings.oLanguage.oPaginate;
  34. var btnDisplay, btnClass, counter=0;
  35. var attach = function( container, buttons ) {
  36. var i, ien, node, button;
  37. var clickHandler = function ( e ) {
  38. e.preventDefault();
  39. if ( !$(e.currentTarget).hasClass('disabled') ) {
  40. api.page( e.data.action ).draw( 'page' );
  41. }
  42. };
  43. for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
  44. button = buttons[i];
  45. if ( $.isArray( button ) ) {
  46. attach( container, button );
  47. }
  48. else {
  49. btnDisplay = '';
  50. btnClass = '';
  51. switch ( button ) {
  52. case 'ellipsis':
  53. btnDisplay = '&hellip;';
  54. btnClass = 'disabled';
  55. break;
  56. case 'first':
  57. btnDisplay = lang.sFirst;
  58. btnClass = button + (page > 0 ?
  59. '' : ' disabled');
  60. break;
  61. case 'previous':
  62. btnDisplay = lang.sPrevious;
  63. btnClass = button + (page > 0 ?
  64. '' : ' disabled');
  65. break;
  66. case 'next':
  67. btnDisplay = lang.sNext;
  68. btnClass = button + (page < pages-1 ?
  69. '' : ' disabled');
  70. break;
  71. case 'last':
  72. btnDisplay = lang.sLast;
  73. btnClass = button + (page < pages-1 ?
  74. '' : ' disabled');
  75. break;
  76. default:
  77. btnDisplay = button + 1;
  78. btnClass = page === button ?
  79. 'active' : '';
  80. break;
  81. }
  82. if ( btnDisplay ) {
  83. node = $('<li>', {
  84. 'class': classes.sPageButton+' '+btnClass,
  85. 'id': idx === 0 && typeof button === 'string' ?
  86. settings.sTableId +'_'+ button :
  87. null
  88. } )
  89. .append( $('<a>', {
  90. 'href': '#',
  91. 'aria-controls': settings.sTableId,
  92. 'data-dt-idx': counter,
  93. 'tabindex': settings.iTabIndex
  94. } )
  95. .html( btnDisplay )
  96. )
  97. .appendTo( container );
  98. settings.oApi._fnBindAction(
  99. node, {action: button}, clickHandler
  100. );
  101. counter++;
  102. }
  103. }
  104. }
  105. };
  106. // IE9 throws an 'unknown error' if document.activeElement is used
  107. // inside an iframe or frame.
  108. var activeEl;
  109. try {
  110. // Because this approach is destroying and recreating the paging
  111. // elements, focus is lost on the select button which is bad for
  112. // accessibility. So we want to restore focus once the draw has
  113. // completed
  114. activeEl = $(host).find(document.activeElement).data('dt-idx');
  115. }
  116. catch (e) {}
  117. attach(
  118. $(host).empty().html('<ul class="pagination"/>').children('ul'),
  119. buttons
  120. );
  121. if ( activeEl ) {
  122. $(host).find( '[data-dt-idx='+activeEl+']' ).focus();
  123. }
  124. };
  125. /*
  126. * TableTools Bootstrap compatibility
  127. * Required TableTools 2.1+
  128. */
  129. if ( DataTable.TableTools ) {
  130. // Set the classes that TableTools uses to something suitable for Bootstrap
  131. $.extend( true, DataTable.TableTools.classes, {
  132. "container": "DTTT btn-group",
  133. "buttons": {
  134. "normal": "btn btn-default",
  135. "disabled": "disabled"
  136. },
  137. "collection": {
  138. "container": "DTTT_dropdown dropdown-menu",
  139. "buttons": {
  140. "normal": "",
  141. "disabled": "disabled"
  142. }
  143. },
  144. "print": {
  145. "info": "DTTT_print_info"
  146. },
  147. "select": {
  148. "row": "active"
  149. }
  150. } );
  151. // Have the collection use a bootstrap compatible drop down
  152. $.extend( true, DataTable.TableTools.DEFAULTS.oTags, {
  153. "collection": {
  154. "container": "ul",
  155. "button": "li",
  156. "liner": "a"
  157. }
  158. } );
  159. }
  160. }; // /factory
  161. // Define as an AMD module if possible
  162. if ( typeof define === 'function' && define.amd ) {
  163. define( ['jquery', 'datatables'], factory );
  164. }
  165. else if ( typeof exports === 'object' ) {
  166. // Node/CommonJS
  167. factory( require('jquery'), require('datatables') );
  168. }
  169. else if ( jQuery ) {
  170. // Otherwise simply initialise as normal, stopping multiple evaluation
  171. factory( jQuery, jQuery.fn.dataTable );
  172. }
  173. })(window, document);