dataTables.uikit.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. /*! DataTables UIkit 3 integration
  2. */
  3. /**
  4. * This is a tech preview of UIKit integration with DataTables.
  5. */
  6. (function( factory ){
  7. if ( typeof define === 'function' && define.amd ) {
  8. // AMD
  9. define( ['jquery', 'datatables.net'], function ( $ ) {
  10. return factory( $, window, document );
  11. } );
  12. }
  13. else if ( typeof exports === 'object' ) {
  14. // CommonJS
  15. module.exports = function (root, $) {
  16. if ( ! root ) {
  17. root = window;
  18. }
  19. if ( ! $ || ! $.fn.dataTable ) {
  20. // Require DataTables, which attaches to jQuery, including
  21. // jQuery if needed and have a $ property so we can access the
  22. // jQuery object that is used
  23. $ = require('datatables.net')(root, $).$;
  24. }
  25. return factory( $, root, root.document );
  26. };
  27. }
  28. else {
  29. // Browser
  30. factory( jQuery, window, document );
  31. }
  32. }(function( $, window, document, undefined ) {
  33. 'use strict';
  34. var DataTable = $.fn.dataTable;
  35. /* Set the defaults for DataTables initialisation */
  36. $.extend( true, DataTable.defaults, {
  37. dom:
  38. "<'row uk-grid'<'uk-width-1-2'l><'uk-width-1-2'f>>" +
  39. "<'row uk-grid dt-merge-grid'<'uk-width-1-1'tr>>" +
  40. "<'row uk-grid dt-merge-grid'<'uk-width-2-5'i><'uk-width-3-5'p>>",
  41. renderer: 'uikit'
  42. } );
  43. /* Default class modification */
  44. $.extend( DataTable.ext.classes, {
  45. sWrapper: "dataTables_wrapper uk-form dt-uikit",
  46. sFilterInput: "uk-form-small",
  47. sLengthSelect: "uk-form-small",
  48. sProcessing: "dataTables_processing uk-panel"
  49. } );
  50. /* UIkit paging button renderer */
  51. DataTable.ext.renderer.pageButton.uikit = function ( settings, host, idx, buttons, page, pages ) {
  52. var api = new DataTable.Api( settings );
  53. var classes = settings.oClasses;
  54. var lang = settings.oLanguage.oPaginate;
  55. var aria = settings.oLanguage.oAria.paginate || {};
  56. var btnDisplay, btnClass, counter=0;
  57. var attach = function( container, buttons ) {
  58. var i, ien, node, button;
  59. var clickHandler = function ( e ) {
  60. e.preventDefault();
  61. if ( !$(e.currentTarget).hasClass('disabled') && api.page() != e.data.action ) {
  62. api.page( e.data.action ).draw( 'page' );
  63. }
  64. };
  65. for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
  66. button = buttons[i];
  67. if ( $.isArray( button ) ) {
  68. attach( container, button );
  69. }
  70. else {
  71. btnDisplay = '';
  72. btnClass = '';
  73. switch ( button ) {
  74. case 'ellipsis':
  75. btnDisplay = '<i class="uk-icon-ellipsis-h"></i>';
  76. btnClass = 'uk-disabled disabled';
  77. break;
  78. case 'first':
  79. btnDisplay = '<i class="uk-icon-angle-double-left"></i> ' + lang.sFirst;
  80. btnClass = (page > 0 ?
  81. '' : ' uk-disabled disabled');
  82. break;
  83. case 'previous':
  84. btnDisplay = '<i class="uk-icon-angle-left"></i> ' + lang.sPrevious;
  85. btnClass = (page > 0 ?
  86. '' : 'uk-disabled disabled');
  87. break;
  88. case 'next':
  89. btnDisplay = lang.sNext + ' <i class="uk-icon-angle-right"></i>';
  90. btnClass = (page < pages-1 ?
  91. '' : 'uk-disabled disabled');
  92. break;
  93. case 'last':
  94. btnDisplay = lang.sLast + ' <i class="uk-icon-angle-double-right"></i>';
  95. btnClass = (page < pages-1 ?
  96. '' : ' uk-disabled disabled');
  97. break;
  98. default:
  99. btnDisplay = button + 1;
  100. btnClass = page === button ?
  101. 'uk-active' : '';
  102. break;
  103. }
  104. if ( btnDisplay ) {
  105. node = $('<li>', {
  106. 'class': classes.sPageButton+' '+btnClass,
  107. 'id': idx === 0 && typeof button === 'string' ?
  108. settings.sTableId +'_'+ button :
  109. null
  110. } )
  111. .append( $(( -1 != btnClass.indexOf('disabled') || -1 != btnClass.indexOf('active') ) ? '<span>' : '<a>', {
  112. 'href': '#',
  113. 'aria-controls': settings.sTableId,
  114. 'aria-label': aria[ button ],
  115. 'data-dt-idx': counter,
  116. 'tabindex': settings.iTabIndex
  117. } )
  118. .html( btnDisplay )
  119. )
  120. .appendTo( container );
  121. settings.oApi._fnBindAction(
  122. node, {action: button}, clickHandler
  123. );
  124. counter++;
  125. }
  126. }
  127. }
  128. };
  129. // IE9 throws an 'unknown error' if document.activeElement is used
  130. // inside an iframe or frame.
  131. var activeEl;
  132. try {
  133. // Because this approach is destroying and recreating the paging
  134. // elements, focus is lost on the select button which is bad for
  135. // accessibility. So we want to restore focus once the draw has
  136. // completed
  137. activeEl = $(host).find(document.activeElement).data('dt-idx');
  138. }
  139. catch (e) {}
  140. attach(
  141. $(host).empty().html('<ul class="uk-pagination uk-pagination-right"/>').children('ul'),
  142. buttons
  143. );
  144. if ( activeEl ) {
  145. $(host).find( '[data-dt-idx='+activeEl+']' ).focus();
  146. }
  147. };
  148. return DataTable;
  149. }));