datatables.uikit.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. /*!
  2. * DataTables UIKit integration
  3. * author: tzd
  4. */
  5. (function(window, document, undefined){
  6. var factory = function( $, DataTable ) {
  7. "use strict";
  8. /* Set the defaults for DataTables initialisation */
  9. $.extend( true, DataTable.defaults, {
  10. dom:
  11. "<'dt-uikit-header'<'uk-grid'<'uk-width-medium-2-3'l><'uk-width-medium-1-3'f>>>" +
  12. "<'uk-overflow-container'tr>" +
  13. "<'dt-uikit-footer'<'uk-grid'<'uk-width-medium-3-10'i><'uk-width-medium-7-10'p>>>",
  14. renderer: 'uikit',
  15. "order": []
  16. } );
  17. /* Default class modification */
  18. $.extend( DataTable.ext.classes, {
  19. sWrapper: "dataTables_wrapper form-inline dt-uikit",
  20. sFilterInput: "md-input",
  21. sLengthSelect: "dt-selectize",
  22. "sPaging": ""
  23. } );
  24. /* Bootstrap paging button renderer */
  25. DataTable.ext.renderer.pageButton.uikit = function ( settings, host, idx, buttons, page, pages ) {
  26. var api = new DataTable.Api( settings );
  27. var classes = settings.oClasses;
  28. var lang = settings.oLanguage.oPaginate;
  29. var btnDisplay, btnClass, counter=0;
  30. var attach = function( container, buttons ) {
  31. var i, ien, node, button;
  32. var clickHandler = function ( e ) {
  33. e.preventDefault();
  34. if ( !$(e.currentTarget).hasClass('disabled') ) {
  35. api.page( e.data.action ).draw( false );
  36. }
  37. };
  38. for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
  39. button = buttons[i];
  40. if ( $.isArray( button ) ) {
  41. attach( container, button );
  42. }
  43. else {
  44. btnDisplay = '';
  45. btnClass = '';
  46. switch ( button ) {
  47. case 'ellipsis':
  48. btnDisplay = '&hellip;';
  49. btnClass = 'uk-disabled';
  50. break;
  51. case 'first':
  52. btnDisplay = '<i class="uk-icon-angle-double-left"/>';
  53. btnClass = button + (page > 0 ?
  54. '' : ' uk-disabled');
  55. break;
  56. case 'previous':
  57. btnDisplay = lang.sPrevious;
  58. btnClass = button + (page > 0 ?
  59. '' : ' uk-disabled');
  60. break;
  61. case 'next':
  62. btnDisplay = lang.sNext;
  63. btnClass = button + (page < pages-1 ?
  64. '' : ' uk-disabled');
  65. break;
  66. case 'last':
  67. btnDisplay = '<i class="uk-icon-angle-double-right"/>';
  68. btnClass = button + (page < pages-1 ?
  69. '' : ' uk-disabled');
  70. break;
  71. default:
  72. btnDisplay = button + 1;
  73. btnClass = page === button ?
  74. 'uk-active' : '';
  75. break;
  76. }
  77. if ( btnDisplay ) {
  78. node = $('<li>', {
  79. 'class': classes.sPageButton+' '+btnClass,
  80. 'id': idx === 0 && typeof button === 'string' ?
  81. settings.sTableId +'_'+ button :
  82. null
  83. } )
  84. .append( $('<a>', {
  85. 'href': '#',
  86. 'aria-controls': settings.sTableId,
  87. 'data-dt-idx': counter,
  88. 'tabindex': settings.iTabIndex
  89. } )
  90. .html( btnDisplay )
  91. )
  92. .appendTo( container );
  93. settings.oApi._fnBindAction(
  94. node, {action: button}, clickHandler
  95. );
  96. counter++;
  97. }
  98. }
  99. }
  100. };
  101. var activeEl;
  102. try {
  103. activeEl = $(document.activeElement).data('dt-idx');
  104. }
  105. catch (e) {}
  106. attach(
  107. $(host).empty().html('<ul class="uk-pagination"/>').children('ul'),
  108. buttons
  109. );
  110. if ( activeEl ) {
  111. $(host).find( '[data-dt-idx='+activeEl+']' ).focus();
  112. }
  113. };
  114. };
  115. $('body').on( 'init.dt', '.dt-uikit', function () {
  116. if(!$(this).hasClass('md-processed')) {
  117. var dt_filter = $(this).find('.dataTables_filter'),
  118. search_label = dt_filter.children('label').text();
  119. dt_filter.find('.md-input').attr('placeholder',search_label).unwrap();
  120. dt_filter.contents().filter(function(){
  121. return (this.nodeType == 3);
  122. }).remove();
  123. // reinitialize md inputs
  124. altair_md.inputs();
  125. // initilaize selectize
  126. $(this).find('.dt-selectize').selectize({
  127. dropdownParent: 'body',
  128. onDropdownOpen: function($dropdown) {
  129. $dropdown
  130. .hide()
  131. .velocity('slideDown', {
  132. duration: 200,
  133. easing: easing_swiftOut
  134. })
  135. },
  136. onDropdownClose: function($dropdown) {
  137. $dropdown
  138. .show()
  139. .velocity('slideUp', {
  140. duration: 200,
  141. easing: easing_swiftOut
  142. })
  143. }
  144. });
  145. $(this).find('.ColVis_MasterButton').addClass('md-btn');
  146. $(this).addClass('md-processed');
  147. }
  148. });
  149. // Define as an AMD module if possible
  150. if ( typeof define === 'function' && define.amd ) {
  151. define( ['jquery', 'datatables'], factory );
  152. }
  153. else if ( typeof exports === 'object' ) {
  154. // Node/CommonJS
  155. factory( require('jquery'), require('datatables') );
  156. }
  157. else if ( jQuery ) {
  158. // Otherwise simply initialise as normal, stopping multiple evaluation
  159. factory( jQuery, jQuery.fn.dataTable );
  160. }
  161. })(window, document);