| @@ 41-182 (lines=142) @@ | ||
| 38 | // Browser |
|
| 39 | factory( jQuery, window, document ); |
|
| 40 | } |
|
| 41 | }(function( $, window, document, undefined ) { |
|
| 42 | 'use strict'; |
|
| 43 | var DataTable = $.fn.dataTable; |
|
| 44 | ||
| 45 | ||
| 46 | /* Set the defaults for DataTables initialisation */ |
|
| 47 | $.extend( true, DataTable.defaults, { |
|
| 48 | dom: |
|
| 49 | "<'row'<'col-sm-6'l><'col-sm-6'f>>" + |
|
| 50 | "<'row'<'col-sm-12'tr>>" + |
|
| 51 | "<'row'<'col-sm-5'i><'col-sm-7'p>>", |
|
| 52 | renderer: 'bootstrap' |
|
| 53 | } ); |
|
| 54 | ||
| 55 | ||
| 56 | /* Default class modification */ |
|
| 57 | $.extend( DataTable.ext.classes, { |
|
| 58 | sWrapper: "dataTables_wrapper form-inline dt-bootstrap", |
|
| 59 | sFilterInput: "form-control input-sm", |
|
| 60 | sLengthSelect: "form-control input-sm", |
|
| 61 | sProcessing: "dataTables_processing panel panel-default" |
|
| 62 | } ); |
|
| 63 | ||
| 64 | ||
| 65 | /* Bootstrap paging button renderer */ |
|
| 66 | DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) { |
|
| 67 | var api = new DataTable.Api( settings ); |
|
| 68 | var classes = settings.oClasses; |
|
| 69 | var lang = settings.oLanguage.oPaginate; |
|
| 70 | var aria = settings.oLanguage.oAria.paginate || {}; |
|
| 71 | var btnDisplay, btnClass, counter=0; |
|
| 72 | ||
| 73 | var attach = function( container, buttons ) { |
|
| 74 | var i, ien, node, button; |
|
| 75 | var clickHandler = function ( e ) { |
|
| 76 | e.preventDefault(); |
|
| 77 | if ( !$(e.currentTarget).hasClass('disabled') && api.page() != e.data.action ) { |
|
| 78 | api.page( e.data.action ).draw( 'page' ); |
|
| 79 | } |
|
| 80 | }; |
|
| 81 | ||
| 82 | for ( i=0, ien=buttons.length ; i<ien ; i++ ) { |
|
| 83 | button = buttons[i]; |
|
| 84 | ||
| 85 | if ( $.isArray( button ) ) { |
|
| 86 | attach( container, button ); |
|
| 87 | } |
|
| 88 | else { |
|
| 89 | btnDisplay = ''; |
|
| 90 | btnClass = ''; |
|
| 91 | ||
| 92 | switch ( button ) { |
|
| 93 | case 'ellipsis': |
|
| 94 | btnDisplay = '…'; |
|
| 95 | btnClass = 'disabled'; |
|
| 96 | break; |
|
| 97 | ||
| 98 | case 'first': |
|
| 99 | btnDisplay = lang.sFirst; |
|
| 100 | btnClass = button + (page > 0 ? |
|
| 101 | '' : ' disabled'); |
|
| 102 | break; |
|
| 103 | ||
| 104 | case 'previous': |
|
| 105 | btnDisplay = lang.sPrevious; |
|
| 106 | btnClass = button + (page > 0 ? |
|
| 107 | '' : ' disabled'); |
|
| 108 | break; |
|
| 109 | ||
| 110 | case 'next': |
|
| 111 | btnDisplay = lang.sNext; |
|
| 112 | btnClass = button + (page < pages-1 ? |
|
| 113 | '' : ' disabled'); |
|
| 114 | break; |
|
| 115 | ||
| 116 | case 'last': |
|
| 117 | btnDisplay = lang.sLast; |
|
| 118 | btnClass = button + (page < pages-1 ? |
|
| 119 | '' : ' disabled'); |
|
| 120 | break; |
|
| 121 | ||
| 122 | default: |
|
| 123 | btnDisplay = button + 1; |
|
| 124 | btnClass = page === button ? |
|
| 125 | 'active' : ''; |
|
| 126 | break; |
|
| 127 | } |
|
| 128 | ||
| 129 | if ( btnDisplay ) { |
|
| 130 | node = $('<li>', { |
|
| 131 | 'class': classes.sPageButton+' '+btnClass, |
|
| 132 | 'id': idx === 0 && typeof button === 'string' ? |
|
| 133 | settings.sTableId +'_'+ button : |
|
| 134 | null |
|
| 135 | } ) |
|
| 136 | .append( $('<a>', { |
|
| 137 | 'href': '#', |
|
| 138 | 'aria-controls': settings.sTableId, |
|
| 139 | 'aria-label': aria[ button ], |
|
| 140 | 'data-dt-idx': counter, |
|
| 141 | 'tabindex': settings.iTabIndex |
|
| 142 | } ) |
|
| 143 | .html( btnDisplay ) |
|
| 144 | ) |
|
| 145 | .appendTo( container ); |
|
| 146 | ||
| 147 | settings.oApi._fnBindAction( |
|
| 148 | node, {action: button}, clickHandler |
|
| 149 | ); |
|
| 150 | ||
| 151 | counter++; |
|
| 152 | } |
|
| 153 | } |
|
| 154 | } |
|
| 155 | }; |
|
| 156 | ||
| 157 | // IE9 throws an 'unknown error' if document.activeElement is used |
|
| 158 | // inside an iframe or frame. |
|
| 159 | var activeEl; |
|
| 160 | ||
| 161 | try { |
|
| 162 | // Because this approach is destroying and recreating the paging |
|
| 163 | // elements, focus is lost on the select button which is bad for |
|
| 164 | // accessibility. So we want to restore focus once the draw has |
|
| 165 | // completed |
|
| 166 | activeEl = $(host).find(document.activeElement).data('dt-idx'); |
|
| 167 | } |
|
| 168 | catch (e) {} |
|
| 169 | ||
| 170 | attach( |
|
| 171 | $(host).empty().html('<ul class="pagination"/>').children('ul'), |
|
| 172 | buttons |
|
| 173 | ); |
|
| 174 | ||
| 175 | if ( activeEl !== undefined ) { |
|
| 176 | $(host).find( '[data-dt-idx='+activeEl+']' ).focus(); |
|
| 177 | } |
|
| 178 | }; |
|
| 179 | ||
| 180 | ||
| 181 | return DataTable; |
|
| 182 | })); |
|
| 183 | ||
| @@ 14471-14574 (lines=104) @@ | ||
| 14468 | ||
| 14469 | $.extend( true, DataTable.ext.renderer, { |
|
| 14470 | pageButton: { |
|
| 14471 | _: function ( settings, host, idx, buttons, page, pages ) { |
|
| 14472 | var classes = settings.oClasses; |
|
| 14473 | var lang = settings.oLanguage.oPaginate; |
|
| 14474 | var aria = settings.oLanguage.oAria.paginate || {}; |
|
| 14475 | var btnDisplay, btnClass, counter=0; |
|
| 14476 | ||
| 14477 | var attach = function( container, buttons ) { |
|
| 14478 | var i, ien, node, button; |
|
| 14479 | var clickHandler = function ( e ) { |
|
| 14480 | _fnPageChange( settings, e.data.action, true ); |
|
| 14481 | }; |
|
| 14482 | ||
| 14483 | for ( i=0, ien=buttons.length ; i<ien ; i++ ) { |
|
| 14484 | button = buttons[i]; |
|
| 14485 | ||
| 14486 | if ( $.isArray( button ) ) { |
|
| 14487 | var inner = $( '<'+(button.DT_el || 'div')+'/>' ) |
|
| 14488 | .appendTo( container ); |
|
| 14489 | attach( inner, button ); |
|
| 14490 | } |
|
| 14491 | else { |
|
| 14492 | btnDisplay = null; |
|
| 14493 | btnClass = ''; |
|
| 14494 | ||
| 14495 | switch ( button ) { |
|
| 14496 | case 'ellipsis': |
|
| 14497 | container.append('<span class="ellipsis">…</span>'); |
|
| 14498 | break; |
|
| 14499 | ||
| 14500 | case 'first': |
|
| 14501 | btnDisplay = lang.sFirst; |
|
| 14502 | btnClass = button + (page > 0 ? |
|
| 14503 | '' : ' '+classes.sPageButtonDisabled); |
|
| 14504 | break; |
|
| 14505 | ||
| 14506 | case 'previous': |
|
| 14507 | btnDisplay = lang.sPrevious; |
|
| 14508 | btnClass = button + (page > 0 ? |
|
| 14509 | '' : ' '+classes.sPageButtonDisabled); |
|
| 14510 | break; |
|
| 14511 | ||
| 14512 | case 'next': |
|
| 14513 | btnDisplay = lang.sNext; |
|
| 14514 | btnClass = button + (page < pages-1 ? |
|
| 14515 | '' : ' '+classes.sPageButtonDisabled); |
|
| 14516 | break; |
|
| 14517 | ||
| 14518 | case 'last': |
|
| 14519 | btnDisplay = lang.sLast; |
|
| 14520 | btnClass = button + (page < pages-1 ? |
|
| 14521 | '' : ' '+classes.sPageButtonDisabled); |
|
| 14522 | break; |
|
| 14523 | ||
| 14524 | default: |
|
| 14525 | btnDisplay = button + 1; |
|
| 14526 | btnClass = page === button ? |
|
| 14527 | classes.sPageButtonActive : ''; |
|
| 14528 | break; |
|
| 14529 | } |
|
| 14530 | ||
| 14531 | if ( btnDisplay !== null ) { |
|
| 14532 | node = $('<a>', { |
|
| 14533 | 'class': classes.sPageButton+' '+btnClass, |
|
| 14534 | 'aria-controls': settings.sTableId, |
|
| 14535 | 'aria-label': aria[ button ], |
|
| 14536 | 'data-dt-idx': counter, |
|
| 14537 | 'tabindex': settings.iTabIndex, |
|
| 14538 | 'id': idx === 0 && typeof button === 'string' ? |
|
| 14539 | settings.sTableId +'_'+ button : |
|
| 14540 | null |
|
| 14541 | } ) |
|
| 14542 | .html( btnDisplay ) |
|
| 14543 | .appendTo( container ); |
|
| 14544 | ||
| 14545 | _fnBindAction( |
|
| 14546 | node, {action: button}, clickHandler |
|
| 14547 | ); |
|
| 14548 | ||
| 14549 | counter++; |
|
| 14550 | } |
|
| 14551 | } |
|
| 14552 | } |
|
| 14553 | }; |
|
| 14554 | ||
| 14555 | // IE9 throws an 'unknown error' if document.activeElement is used |
|
| 14556 | // inside an iframe or frame. Try / catch the error. Not good for |
|
| 14557 | // accessibility, but neither are frames. |
|
| 14558 | var activeEl; |
|
| 14559 | ||
| 14560 | try { |
|
| 14561 | // Because this approach is destroying and recreating the paging |
|
| 14562 | // elements, focus is lost on the select button which is bad for |
|
| 14563 | // accessibility. So we want to restore focus once the draw has |
|
| 14564 | // completed |
|
| 14565 | activeEl = $(host).find(document.activeElement).data('dt-idx'); |
|
| 14566 | } |
|
| 14567 | catch (e) {} |
|
| 14568 | ||
| 14569 | attach( $(host).empty(), buttons ); |
|
| 14570 | ||
| 14571 | if ( activeEl !== undefined ) { |
|
| 14572 | $(host).find( '[data-dt-idx='+activeEl+']' ).focus(); |
|
| 14573 | } |
|
| 14574 | } |
|
| 14575 | } |
|
| 14576 | } ); |
|
| 14577 | ||