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