dataTables.material.js 4.7 KB

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