| 1 | /*! Responsive 2.2.3
|
|---|
| 2 | * 2014-2018 SpryMedia Ltd - datatables.net/license
|
|---|
| 3 | */
|
|---|
| 4 |
|
|---|
| 5 | /**
|
|---|
| 6 | * @summary Responsive
|
|---|
| 7 | * @description Responsive tables plug-in for DataTables
|
|---|
| 8 | * @version 2.2.3
|
|---|
| 9 | * @file dataTables.responsive.js
|
|---|
| 10 | * @author SpryMedia Ltd (www.sprymedia.co.uk)
|
|---|
| 11 | * @contact www.sprymedia.co.uk/contact
|
|---|
| 12 | * @copyright Copyright 2014-2018 SpryMedia Ltd.
|
|---|
| 13 | *
|
|---|
| 14 | * This source file is free software, available under the following license:
|
|---|
| 15 | * MIT license - http://datatables.net/license/mit
|
|---|
| 16 | *
|
|---|
| 17 | * This source file is distributed in the hope that it will be useful, but
|
|---|
| 18 | * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
|
|---|
| 19 | * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
|
|---|
| 20 | *
|
|---|
| 21 | * For details please refer to: http://www.datatables.net
|
|---|
| 22 | */
|
|---|
| 23 | (function( factory ){
|
|---|
| 24 | if ( typeof define === 'function' && define.amd ) {
|
|---|
| 25 | // AMD
|
|---|
| 26 | define( ['jquery', 'datatables.net'], function ( $ ) {
|
|---|
| 27 | return factory( $, window, document );
|
|---|
| 28 | } );
|
|---|
| 29 | }
|
|---|
| 30 | else if ( typeof exports === 'object' ) {
|
|---|
| 31 | // CommonJS
|
|---|
| 32 | module.exports = function (root, $) {
|
|---|
| 33 | if ( ! root ) {
|
|---|
| 34 | root = window;
|
|---|
| 35 | }
|
|---|
| 36 |
|
|---|
| 37 | if ( ! $ || ! $.fn.dataTable ) {
|
|---|
| 38 | $ = require('datatables.net')(root, $).$;
|
|---|
| 39 | }
|
|---|
| 40 |
|
|---|
| 41 | return factory( $, root, root.document );
|
|---|
| 42 | };
|
|---|
| 43 | }
|
|---|
| 44 | else {
|
|---|
| 45 | // Browser
|
|---|
| 46 | factory( jQuery, window, document );
|
|---|
| 47 | }
|
|---|
| 48 | }(function( $, window, document, undefined ) {
|
|---|
| 49 | 'use strict';
|
|---|
| 50 | var DataTable = $.fn.dataTable;
|
|---|
| 51 |
|
|---|
| 52 |
|
|---|
| 53 | /**
|
|---|
| 54 | * Responsive is a plug-in for the DataTables library that makes use of
|
|---|
| 55 | * DataTables' ability to change the visibility of columns, changing the
|
|---|
| 56 | * visibility of columns so the displayed columns fit into the table container.
|
|---|
| 57 | * The end result is that complex tables will be dynamically adjusted to fit
|
|---|
| 58 | * into the viewport, be it on a desktop, tablet or mobile browser.
|
|---|
| 59 | *
|
|---|
| 60 | * Responsive for DataTables has two modes of operation, which can used
|
|---|
| 61 | * individually or combined:
|
|---|
| 62 | *
|
|---|
| 63 | * * Class name based control - columns assigned class names that match the
|
|---|
| 64 | * breakpoint logic can be shown / hidden as required for each breakpoint.
|
|---|
| 65 | * * Automatic control - columns are automatically hidden when there is no
|
|---|
| 66 | * room left to display them. Columns removed from the right.
|
|---|
| 67 | *
|
|---|
| 68 | * In additional to column visibility control, Responsive also has built into
|
|---|
| 69 | * options to use DataTables' child row display to show / hide the information
|
|---|
| 70 | * from the table that has been hidden. There are also two modes of operation
|
|---|
| 71 | * for this child row display:
|
|---|
| 72 | *
|
|---|
| 73 | * * Inline - when the control element that the user can use to show / hide
|
|---|
| 74 | * child rows is displayed inside the first column of the table.
|
|---|
| 75 | * * Column - where a whole column is dedicated to be the show / hide control.
|
|---|
| 76 | *
|
|---|
| 77 | * Initialisation of Responsive is performed by:
|
|---|
| 78 | *
|
|---|
| 79 | * * Adding the class `responsive` or `dt-responsive` to the table. In this case
|
|---|
| 80 | * Responsive will automatically be initialised with the default configuration
|
|---|
| 81 | * options when the DataTable is created.
|
|---|
| 82 | * * Using the `responsive` option in the DataTables configuration options. This
|
|---|
| 83 | * can also be used to specify the configuration options, or simply set to
|
|---|
| 84 | * `true` to use the defaults.
|
|---|
| 85 | *
|
|---|
| 86 | * @class
|
|---|
| 87 | * @param {object} settings DataTables settings object for the host table
|
|---|
| 88 | * @param {object} [opts] Configuration options
|
|---|
| 89 | * @requires jQuery 1.7+
|
|---|
| 90 | * @requires DataTables 1.10.3+
|
|---|
| 91 | *
|
|---|
| 92 | * @example
|
|---|
| 93 | * $('#example').DataTable( {
|
|---|
| 94 | * responsive: true
|
|---|
| 95 | * } );
|
|---|
| 96 | * } );
|
|---|
| 97 | */
|
|---|
| 98 | var Responsive = function ( settings, opts ) {
|
|---|
| 99 | // Sanity check that we are using DataTables 1.10 or newer
|
|---|
| 100 | if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.10.10' ) ) {
|
|---|
| 101 | throw 'DataTables Responsive requires DataTables 1.10.10 or newer';
|
|---|
| 102 | }
|
|---|
| 103 |
|
|---|
| 104 | this.s = {
|
|---|
| 105 | dt: new DataTable.Api( settings ),
|
|---|
| 106 | columns: [],
|
|---|
| 107 | current: []
|
|---|
| 108 | };
|
|---|
| 109 |
|
|---|
| 110 | // Check if responsive has already been initialised on this table
|
|---|
| 111 | if ( this.s.dt.settings()[0].responsive ) {
|
|---|
| 112 | return;
|
|---|
| 113 | }
|
|---|
| 114 |
|
|---|
| 115 | // details is an object, but for simplicity the user can give it as a string
|
|---|
| 116 | // or a boolean
|
|---|
| 117 | if ( opts && typeof opts.details === 'string' ) {
|
|---|
| 118 | opts.details = { type: opts.details };
|
|---|
| 119 | }
|
|---|
| 120 | else if ( opts && opts.details === false ) {
|
|---|
| 121 | opts.details = { type: false };
|
|---|
| 122 | }
|
|---|
| 123 | else if ( opts && opts.details === true ) {
|
|---|
| 124 | opts.details = { type: 'inline' };
|
|---|
| 125 | }
|
|---|
| 126 |
|
|---|
| 127 | this.c = $.extend( true, {}, Responsive.defaults, DataTable.defaults.responsive, opts );
|
|---|
| 128 | settings.responsive = this;
|
|---|
| 129 | this._constructor();
|
|---|
| 130 | };
|
|---|
| 131 |
|
|---|
| 132 | $.extend( Responsive.prototype, {
|
|---|
| 133 | /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|---|
| 134 | * Constructor
|
|---|
| 135 | */
|
|---|
| 136 |
|
|---|
| 137 | /**
|
|---|
| 138 | * Initialise the Responsive instance
|
|---|
| 139 | *
|
|---|
| 140 | * @private
|
|---|
| 141 | */
|
|---|
| 142 | _constructor: function ()
|
|---|
| 143 | {
|
|---|
| 144 | var that = this;
|
|---|
| 145 | var dt = this.s.dt;
|
|---|
| 146 | var dtPrivateSettings = dt.settings()[0];
|
|---|
| 147 | var oldWindowWidth = $(window).width();
|
|---|
| 148 |
|
|---|
| 149 | dt.settings()[0]._responsive = this;
|
|---|
| 150 |
|
|---|
| 151 | // Use DataTables' throttle function to avoid processor thrashing on
|
|---|
| 152 | // resize
|
|---|
| 153 | $(window).on( 'resize.dtr orientationchange.dtr', DataTable.util.throttle( function () {
|
|---|
| 154 | // iOS has a bug whereby resize can fire when only scrolling
|
|---|
| 155 | // See: http://stackoverflow.com/questions/8898412
|
|---|
| 156 | var width = $(window).width();
|
|---|
| 157 |
|
|---|
| 158 | if ( width !== oldWindowWidth ) {
|
|---|
| 159 | that._resize();
|
|---|
| 160 | oldWindowWidth = width;
|
|---|
| 161 | }
|
|---|
| 162 | } ) );
|
|---|
| 163 |
|
|---|
| 164 | // DataTables doesn't currently trigger an event when a row is added, so
|
|---|
| 165 | // we need to hook into its private API to enforce the hidden rows when
|
|---|
| 166 | // new data is added
|
|---|
| 167 | dtPrivateSettings.oApi._fnCallbackReg( dtPrivateSettings, 'aoRowCreatedCallback', function (tr, data, idx) {
|
|---|
| 168 | if ( $.inArray( false, that.s.current ) !== -1 ) {
|
|---|
| 169 | $('>td, >th', tr).each( function ( i ) {
|
|---|
| 170 | var idx = dt.column.index( 'toData', i );
|
|---|
| 171 |
|
|---|
| 172 | if ( that.s.current[idx] === false ) {
|
|---|
| 173 | $(this).css('display', 'none');
|
|---|
| 174 | }
|
|---|
| 175 | } );
|
|---|
| 176 | }
|
|---|
| 177 | } );
|
|---|
| 178 |
|
|---|
| 179 | // Destroy event handler
|
|---|
| 180 | dt.on( 'destroy.dtr', function () {
|
|---|
| 181 | dt.off( '.dtr' );
|
|---|
| 182 | $( dt.table().body() ).off( '.dtr' );
|
|---|
| 183 | $(window).off( 'resize.dtr orientationchange.dtr' );
|
|---|
| 184 |
|
|---|
| 185 | // Restore the columns that we've hidden
|
|---|
| 186 | $.each( that.s.current, function ( i, val ) {
|
|---|
| 187 | if ( val === false ) {
|
|---|
| 188 | that._setColumnVis( i, true );
|
|---|
| 189 | }
|
|---|
| 190 | } );
|
|---|
| 191 | } );
|
|---|
| 192 |
|
|---|
| 193 | // Reorder the breakpoints array here in case they have been added out
|
|---|
| 194 | // of order
|
|---|
| 195 | this.c.breakpoints.sort( function (a, b) {
|
|---|
| 196 | return a.width < b.width ? 1 :
|
|---|
| 197 | a.width > b.width ? -1 : 0;
|
|---|
| 198 | } );
|
|---|
| 199 |
|
|---|
| 200 | this._classLogic();
|
|---|
| 201 | this._resizeAuto();
|
|---|
| 202 |
|
|---|
| 203 | // Details handler
|
|---|
| 204 | var details = this.c.details;
|
|---|
| 205 |
|
|---|
| 206 | if ( details.type !== false ) {
|
|---|
| 207 | that._detailsInit();
|
|---|
| 208 |
|
|---|
| 209 | // DataTables will trigger this event on every column it shows and
|
|---|
| 210 | // hides individually
|
|---|
| 211 | dt.on( 'column-visibility.dtr', function () {
|
|---|
| 212 | // Use a small debounce to allow multiple columns to be set together
|
|---|
| 213 | if ( that._timer ) {
|
|---|
| 214 | clearTimeout( that._timer );
|
|---|
| 215 | }
|
|---|
| 216 |
|
|---|
| 217 | that._timer = setTimeout( function () {
|
|---|
| 218 | that._timer = null;
|
|---|
| 219 |
|
|---|
| 220 | that._classLogic();
|
|---|
| 221 | that._resizeAuto();
|
|---|
| 222 | that._resize();
|
|---|
| 223 |
|
|---|
| 224 | that._redrawChildren();
|
|---|
| 225 | }, 100 );
|
|---|
| 226 | } );
|
|---|
| 227 |
|
|---|
| 228 | // Redraw the details box on each draw which will happen if the data
|
|---|
| 229 | // has changed. This is used until DataTables implements a native
|
|---|
| 230 | // `updated` event for rows
|
|---|
| 231 | dt.on( 'draw.dtr', function () {
|
|---|
| 232 | that._redrawChildren();
|
|---|
| 233 | } );
|
|---|
| 234 |
|
|---|
| 235 | $(dt.table().node()).addClass( 'dtr-'+details.type );
|
|---|
| 236 | }
|
|---|
| 237 |
|
|---|
| 238 | dt.on( 'column-reorder.dtr', function (e, settings, details) {
|
|---|
| 239 | that._classLogic();
|
|---|
| 240 | that._resizeAuto();
|
|---|
| 241 | that._resize();
|
|---|
| 242 | } );
|
|---|
| 243 |
|
|---|
| 244 | // Change in column sizes means we need to calc
|
|---|
| 245 | dt.on( 'column-sizing.dtr', function () {
|
|---|
| 246 | that._resizeAuto();
|
|---|
| 247 | that._resize();
|
|---|
| 248 | });
|
|---|
| 249 |
|
|---|
| 250 | // On Ajax reload we want to reopen any child rows which are displayed
|
|---|
| 251 | // by responsive
|
|---|
| 252 | dt.on( 'preXhr.dtr', function () {
|
|---|
| 253 | var rowIds = [];
|
|---|
| 254 | dt.rows().every( function () {
|
|---|
| 255 | if ( this.child.isShown() ) {
|
|---|
| 256 | rowIds.push( this.id(true) );
|
|---|
| 257 | }
|
|---|
| 258 | } );
|
|---|
| 259 |
|
|---|
| 260 | dt.one( 'draw.dtr', function () {
|
|---|
| 261 | that._resizeAuto();
|
|---|
| 262 | that._resize();
|
|---|
| 263 |
|
|---|
| 264 | dt.rows( rowIds ).every( function () {
|
|---|
| 265 | that._detailsDisplay( this, false );
|
|---|
| 266 | } );
|
|---|
| 267 | } );
|
|---|
| 268 | });
|
|---|
| 269 |
|
|---|
| 270 | dt.on( 'init.dtr', function (e, settings, details) {
|
|---|
| 271 | that._resizeAuto();
|
|---|
| 272 | that._resize();
|
|---|
| 273 |
|
|---|
| 274 | // If columns were hidden, then DataTables needs to adjust the
|
|---|
| 275 | // column sizing
|
|---|
| 276 | if ( $.inArray( false, that.s.current ) ) {
|
|---|
| 277 | dt.columns.adjust();
|
|---|
| 278 | }
|
|---|
| 279 | } );
|
|---|
| 280 |
|
|---|
| 281 | // First pass - draw the table for the current viewport size
|
|---|
| 282 | this._resize();
|
|---|
| 283 | },
|
|---|
| 284 |
|
|---|
| 285 |
|
|---|
| 286 | /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|---|
| 287 | * Private methods
|
|---|
| 288 | */
|
|---|
| 289 |
|
|---|
| 290 | /**
|
|---|
| 291 | * Calculate the visibility for the columns in a table for a given
|
|---|
| 292 | * breakpoint. The result is pre-determined based on the class logic if
|
|---|
| 293 | * class names are used to control all columns, but the width of the table
|
|---|
| 294 | * is also used if there are columns which are to be automatically shown
|
|---|
| 295 | * and hidden.
|
|---|
| 296 | *
|
|---|
| 297 | * @param {string} breakpoint Breakpoint name to use for the calculation
|
|---|
| 298 | * @return {array} Array of boolean values initiating the visibility of each
|
|---|
| 299 | * column.
|
|---|
| 300 | * @private
|
|---|
| 301 | */
|
|---|
| 302 | _columnsVisiblity: function ( breakpoint )
|
|---|
| 303 | {
|
|---|
| 304 | var dt = this.s.dt;
|
|---|
| 305 | var columns = this.s.columns;
|
|---|
| 306 | var i, ien;
|
|---|
| 307 |
|
|---|
| 308 | // Create an array that defines the column ordering based first on the
|
|---|
| 309 | // column's priority, and secondly the column index. This allows the
|
|---|
| 310 | // columns to be removed from the right if the priority matches
|
|---|
| 311 | var order = columns
|
|---|
| 312 | .map( function ( col, idx ) {
|
|---|
| 313 | return {
|
|---|
| 314 | columnIdx: idx,
|
|---|
| 315 | priority: col.priority
|
|---|
| 316 | };
|
|---|
| 317 | } )
|
|---|
| 318 | .sort( function ( a, b ) {
|
|---|
| 319 | if ( a.priority !== b.priority ) {
|
|---|
| 320 | return a.priority - b.priority;
|
|---|
| 321 | }
|
|---|
| 322 | return a.columnIdx - b.columnIdx;
|
|---|
| 323 | } );
|
|---|
| 324 |
|
|---|
| 325 | // Class logic - determine which columns are in this breakpoint based
|
|---|
| 326 | // on the classes. If no class control (i.e. `auto`) then `-` is used
|
|---|
| 327 | // to indicate this to the rest of the function
|
|---|
| 328 | var display = $.map( columns, function ( col, i ) {
|
|---|
| 329 | if ( dt.column(i).visible() === false ) {
|
|---|
| 330 | return 'not-visible';
|
|---|
| 331 | }
|
|---|
| 332 | return col.auto && col.minWidth === null ?
|
|---|
| 333 | false :
|
|---|
| 334 | col.auto === true ?
|
|---|
| 335 | '-' :
|
|---|
| 336 | $.inArray( breakpoint, col.includeIn ) !== -1;
|
|---|
| 337 | } );
|
|---|
| 338 |
|
|---|
| 339 | // Auto column control - first pass: how much width is taken by the
|
|---|
| 340 | // ones that must be included from the non-auto columns
|
|---|
| 341 | var requiredWidth = 0;
|
|---|
| 342 | for ( i=0, ien=display.length ; i<ien ; i++ ) {
|
|---|
| 343 | if ( display[i] === true ) {
|
|---|
| 344 | requiredWidth += columns[i].minWidth;
|
|---|
| 345 | }
|
|---|
| 346 | }
|
|---|
| 347 |
|
|---|
| 348 | // Second pass, use up any remaining width for other columns. For
|
|---|
| 349 | // scrolling tables we need to subtract the width of the scrollbar. It
|
|---|
| 350 | // may not be requires which makes this sub-optimal, but it would
|
|---|
| 351 | // require another full redraw to make complete use of those extra few
|
|---|
| 352 | // pixels
|
|---|
| 353 | var scrolling = dt.settings()[0].oScroll;
|
|---|
| 354 | var bar = scrolling.sY || scrolling.sX ? scrolling.iBarWidth : 0;
|
|---|
| 355 | var widthAvailable = dt.table().container().offsetWidth - bar;
|
|---|
| 356 | var usedWidth = widthAvailable - requiredWidth;
|
|---|
| 357 |
|
|---|
| 358 | // Control column needs to always be included. This makes it sub-
|
|---|
| 359 | // optimal in terms of using the available with, but to stop layout
|
|---|
| 360 | // thrashing or overflow. Also we need to account for the control column
|
|---|
| 361 | // width first so we know how much width is available for the other
|
|---|
| 362 | // columns, since the control column might not be the first one shown
|
|---|
| 363 | for ( i=0, ien=display.length ; i<ien ; i++ ) {
|
|---|
| 364 | if ( columns[i].control ) {
|
|---|
| 365 | usedWidth -= columns[i].minWidth;
|
|---|
| 366 | }
|
|---|
| 367 | }
|
|---|
| 368 |
|
|---|
| 369 | // Allow columns to be shown (counting by priority and then right to
|
|---|
| 370 | // left) until we run out of room
|
|---|
| 371 | var empty = false;
|
|---|
| 372 | for ( i=0, ien=order.length ; i<ien ; i++ ) {
|
|---|
| 373 | var colIdx = order[i].columnIdx;
|
|---|
| 374 |
|
|---|
| 375 | if ( display[colIdx] === '-' && ! columns[colIdx].control && columns[colIdx].minWidth ) {
|
|---|
| 376 | // Once we've found a column that won't fit we don't let any
|
|---|
| 377 | // others display either, or columns might disappear in the
|
|---|
| 378 | // middle of the table
|
|---|
| 379 | if ( empty || usedWidth - columns[colIdx].minWidth < 0 ) {
|
|---|
| 380 | empty = true;
|
|---|
| 381 | display[colIdx] = false;
|
|---|
| 382 | }
|
|---|
| 383 | else {
|
|---|
| 384 | display[colIdx] = true;
|
|---|
| 385 | }
|
|---|
| 386 |
|
|---|
| 387 | usedWidth -= columns[colIdx].minWidth;
|
|---|
| 388 | }
|
|---|
| 389 | }
|
|---|
| 390 |
|
|---|
| 391 | // Determine if the 'control' column should be shown (if there is one).
|
|---|
| 392 | // This is the case when there is a hidden column (that is not the
|
|---|
| 393 | // control column). The two loops look inefficient here, but they are
|
|---|
| 394 | // trivial and will fly through. We need to know the outcome from the
|
|---|
| 395 | // first , before the action in the second can be taken
|
|---|
| 396 | var showControl = false;
|
|---|
| 397 |
|
|---|
| 398 | for ( i=0, ien=columns.length ; i<ien ; i++ ) {
|
|---|
| 399 | if ( ! columns[i].control && ! columns[i].never && display[i] === false ) {
|
|---|
| 400 | showControl = true;
|
|---|
| 401 | break;
|
|---|
| 402 | }
|
|---|
| 403 | }
|
|---|
| 404 |
|
|---|
| 405 | for ( i=0, ien=columns.length ; i<ien ; i++ ) {
|
|---|
| 406 | if ( columns[i].control ) {
|
|---|
| 407 | display[i] = showControl;
|
|---|
| 408 | }
|
|---|
| 409 |
|
|---|
| 410 | // Replace not visible string with false from the control column detection above
|
|---|
| 411 | if ( display[i] === 'not-visible' ) {
|
|---|
| 412 | display[i] = false;
|
|---|
| 413 | }
|
|---|
| 414 | }
|
|---|
| 415 |
|
|---|
| 416 | // Finally we need to make sure that there is at least one column that
|
|---|
| 417 | // is visible
|
|---|
| 418 | if ( $.inArray( true, display ) === -1 ) {
|
|---|
| 419 | display[0] = true;
|
|---|
| 420 | }
|
|---|
| 421 |
|
|---|
| 422 | return display;
|
|---|
| 423 | },
|
|---|
| 424 |
|
|---|
| 425 |
|
|---|
| 426 | /**
|
|---|
| 427 | * Create the internal `columns` array with information about the columns
|
|---|
| 428 | * for the table. This includes determining which breakpoints the column
|
|---|
| 429 | * will appear in, based upon class names in the column, which makes up the
|
|---|
| 430 | * vast majority of this method.
|
|---|
| 431 | *
|
|---|
| 432 | * @private
|
|---|
| 433 | */
|
|---|
| 434 | _classLogic: function ()
|
|---|
| 435 | {
|
|---|
| 436 | var that = this;
|
|---|
| 437 | var calc = {};
|
|---|
| 438 | var breakpoints = this.c.breakpoints;
|
|---|
| 439 | var dt = this.s.dt;
|
|---|
| 440 | var columns = dt.columns().eq(0).map( function (i) {
|
|---|
| 441 | var column = this.column(i);
|
|---|
| 442 | var className = column.header().className;
|
|---|
| 443 | var priority = dt.settings()[0].aoColumns[i].responsivePriority;
|
|---|
| 444 |
|
|---|
| 445 | if ( priority === undefined ) {
|
|---|
| 446 | var dataPriority = $(column.header()).data('priority');
|
|---|
| 447 |
|
|---|
| 448 | priority = dataPriority !== undefined ?
|
|---|
| 449 | dataPriority * 1 :
|
|---|
| 450 | 10000;
|
|---|
| 451 | }
|
|---|
| 452 |
|
|---|
| 453 | return {
|
|---|
| 454 | className: className,
|
|---|
| 455 | includeIn: [],
|
|---|
| 456 | auto: false,
|
|---|
| 457 | control: false,
|
|---|
| 458 | never: className.match(/\bnever\b/) ? true : false,
|
|---|
| 459 | priority: priority
|
|---|
| 460 | };
|
|---|
| 461 | } );
|
|---|
| 462 |
|
|---|
| 463 | // Simply add a breakpoint to `includeIn` array, ensuring that there are
|
|---|
| 464 | // no duplicates
|
|---|
| 465 | var add = function ( colIdx, name ) {
|
|---|
| 466 | var includeIn = columns[ colIdx ].includeIn;
|
|---|
| 467 |
|
|---|
| 468 | if ( $.inArray( name, includeIn ) === -1 ) {
|
|---|
| 469 | includeIn.push( name );
|
|---|
| 470 | }
|
|---|
| 471 | };
|
|---|
| 472 |
|
|---|
| 473 | var column = function ( colIdx, name, operator, matched ) {
|
|---|
| 474 | var size, i, ien;
|
|---|
| 475 |
|
|---|
| 476 | if ( ! operator ) {
|
|---|
| 477 | columns[ colIdx ].includeIn.push( name );
|
|---|
| 478 | }
|
|---|
| 479 | else if ( operator === 'max-' ) {
|
|---|
| 480 | // Add this breakpoint and all smaller
|
|---|
| 481 | size = that._find( name ).width;
|
|---|
| 482 |
|
|---|
| 483 | for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
|
|---|
| 484 | if ( breakpoints[i].width <= size ) {
|
|---|
| 485 | add( colIdx, breakpoints[i].name );
|
|---|
| 486 | }
|
|---|
| 487 | }
|
|---|
| 488 | }
|
|---|
| 489 | else if ( operator === 'min-' ) {
|
|---|
| 490 | // Add this breakpoint and all larger
|
|---|
| 491 | size = that._find( name ).width;
|
|---|
| 492 |
|
|---|
| 493 | for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
|
|---|
| 494 | if ( breakpoints[i].width >= size ) {
|
|---|
| 495 | add( colIdx, breakpoints[i].name );
|
|---|
| 496 | }
|
|---|
| 497 | }
|
|---|
| 498 | }
|
|---|
| 499 | else if ( operator === 'not-' ) {
|
|---|
| 500 | // Add all but this breakpoint
|
|---|
| 501 | for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
|
|---|
| 502 | if ( breakpoints[i].name.indexOf( matched ) === -1 ) {
|
|---|
| 503 | add( colIdx, breakpoints[i].name );
|
|---|
| 504 | }
|
|---|
| 505 | }
|
|---|
| 506 | }
|
|---|
| 507 | };
|
|---|
| 508 |
|
|---|
| 509 | // Loop over each column and determine if it has a responsive control
|
|---|
| 510 | // class
|
|---|
| 511 | columns.each( function ( col, i ) {
|
|---|
| 512 | var classNames = col.className.split(' ');
|
|---|
| 513 | var hasClass = false;
|
|---|
| 514 |
|
|---|
| 515 | // Split the class name up so multiple rules can be applied if needed
|
|---|
| 516 | for ( var k=0, ken=classNames.length ; k<ken ; k++ ) {
|
|---|
| 517 | var className = $.trim( classNames[k] );
|
|---|
| 518 |
|
|---|
| 519 | if ( className === 'all' ) {
|
|---|
| 520 | // Include in all
|
|---|
| 521 | hasClass = true;
|
|---|
| 522 | col.includeIn = $.map( breakpoints, function (a) {
|
|---|
| 523 | return a.name;
|
|---|
| 524 | } );
|
|---|
| 525 | return;
|
|---|
| 526 | }
|
|---|
| 527 | else if ( className === 'none' || col.never ) {
|
|---|
| 528 | // Include in none (default) and no auto
|
|---|
| 529 | hasClass = true;
|
|---|
| 530 | return;
|
|---|
| 531 | }
|
|---|
| 532 | else if ( className === 'control' ) {
|
|---|
| 533 | // Special column that is only visible, when one of the other
|
|---|
| 534 | // columns is hidden. This is used for the details control
|
|---|
| 535 | hasClass = true;
|
|---|
| 536 | col.control = true;
|
|---|
| 537 | return;
|
|---|
| 538 | }
|
|---|
| 539 |
|
|---|
| 540 | $.each( breakpoints, function ( j, breakpoint ) {
|
|---|
| 541 | // Does this column have a class that matches this breakpoint?
|
|---|
| 542 | var brokenPoint = breakpoint.name.split('-');
|
|---|
| 543 | var re = new RegExp( '(min\\-|max\\-|not\\-)?('+brokenPoint[0]+')(\\-[_a-zA-Z0-9])?' );
|
|---|
| 544 | var match = className.match( re );
|
|---|
| 545 |
|
|---|
| 546 | if ( match ) {
|
|---|
| 547 | hasClass = true;
|
|---|
| 548 |
|
|---|
| 549 | if ( match[2] === brokenPoint[0] && match[3] === '-'+brokenPoint[1] ) {
|
|---|
| 550 | // Class name matches breakpoint name fully
|
|---|
| 551 | column( i, breakpoint.name, match[1], match[2]+match[3] );
|
|---|
| 552 | }
|
|---|
| 553 | else if ( match[2] === brokenPoint[0] && ! match[3] ) {
|
|---|
| 554 | // Class name matched primary breakpoint name with no qualifier
|
|---|
| 555 | column( i, breakpoint.name, match[1], match[2] );
|
|---|
| 556 | }
|
|---|
| 557 | }
|
|---|
| 558 | } );
|
|---|
| 559 | }
|
|---|
| 560 |
|
|---|
| 561 | // If there was no control class, then automatic sizing is used
|
|---|
| 562 | if ( ! hasClass ) {
|
|---|
| 563 | col.auto = true;
|
|---|
| 564 | }
|
|---|
| 565 | } );
|
|---|
| 566 |
|
|---|
| 567 | this.s.columns = columns;
|
|---|
| 568 | },
|
|---|
| 569 |
|
|---|
| 570 |
|
|---|
| 571 | /**
|
|---|
| 572 | * Show the details for the child row
|
|---|
| 573 | *
|
|---|
| 574 | * @param {DataTables.Api} row API instance for the row
|
|---|
| 575 | * @param {boolean} update Update flag
|
|---|
| 576 | * @private
|
|---|
| 577 | */
|
|---|
| 578 | _detailsDisplay: function ( row, update )
|
|---|
| 579 | {
|
|---|
| 580 | var that = this;
|
|---|
| 581 | var dt = this.s.dt;
|
|---|
| 582 | var details = this.c.details;
|
|---|
| 583 |
|
|---|
| 584 | if ( details && details.type !== false ) {
|
|---|
| 585 | var res = details.display( row, update, function () {
|
|---|
| 586 | return details.renderer(
|
|---|
| 587 | dt, row[0], that._detailsObj(row[0])
|
|---|
| 588 | );
|
|---|
| 589 | } );
|
|---|
| 590 |
|
|---|
| 591 | if ( res === true || res === false ) {
|
|---|
| 592 | $(dt.table().node()).triggerHandler( 'responsive-display.dt', [dt, row, res, update] );
|
|---|
| 593 | }
|
|---|
| 594 | }
|
|---|
| 595 | },
|
|---|
| 596 |
|
|---|
| 597 |
|
|---|
| 598 | /**
|
|---|
| 599 | * Initialisation for the details handler
|
|---|
| 600 | *
|
|---|
| 601 | * @private
|
|---|
| 602 | */
|
|---|
| 603 | _detailsInit: function ()
|
|---|
| 604 | {
|
|---|
| 605 | var that = this;
|
|---|
| 606 | var dt = this.s.dt;
|
|---|
| 607 | var details = this.c.details;
|
|---|
| 608 |
|
|---|
| 609 | // The inline type always uses the first child as the target
|
|---|
| 610 | if ( details.type === 'inline' ) {
|
|---|
| 611 | details.target = 'td:first-child, th:first-child';
|
|---|
| 612 | }
|
|---|
| 613 |
|
|---|
| 614 | // Keyboard accessibility
|
|---|
| 615 | dt.on( 'draw.dtr', function () {
|
|---|
| 616 | that._tabIndexes();
|
|---|
| 617 | } );
|
|---|
| 618 | that._tabIndexes(); // Initial draw has already happened
|
|---|
| 619 |
|
|---|
| 620 | $( dt.table().body() ).on( 'keyup.dtr', 'td, th', function (e) {
|
|---|
| 621 | if ( e.keyCode === 13 && $(this).data('dtr-keyboard') ) {
|
|---|
| 622 | $(this).click();
|
|---|
| 623 | }
|
|---|
| 624 | } );
|
|---|
| 625 |
|
|---|
| 626 | // type.target can be a string jQuery selector or a column index
|
|---|
| 627 | var target = details.target;
|
|---|
| 628 | var selector = typeof target === 'string' ? target : 'td, th';
|
|---|
| 629 |
|
|---|
| 630 | // Click handler to show / hide the details rows when they are available
|
|---|
| 631 | $( dt.table().body() )
|
|---|
| 632 | .on( 'click.dtr mousedown.dtr mouseup.dtr', selector, function (e) {
|
|---|
| 633 | // If the table is not collapsed (i.e. there is no hidden columns)
|
|---|
| 634 | // then take no action
|
|---|
| 635 | if ( ! $(dt.table().node()).hasClass('collapsed' ) ) {
|
|---|
| 636 | return;
|
|---|
| 637 | }
|
|---|
| 638 |
|
|---|
| 639 | // Check that the row is actually a DataTable's controlled node
|
|---|
| 640 | if ( $.inArray( $(this).closest('tr').get(0), dt.rows().nodes().toArray() ) === -1 ) {
|
|---|
| 641 | return;
|
|---|
| 642 | }
|
|---|
| 643 |
|
|---|
| 644 | // For column index, we determine if we should act or not in the
|
|---|
| 645 | // handler - otherwise it is already okay
|
|---|
| 646 | if ( typeof target === 'number' ) {
|
|---|
| 647 | var targetIdx = target < 0 ?
|
|---|
| 648 | dt.columns().eq(0).length + target :
|
|---|
| 649 | target;
|
|---|
| 650 |
|
|---|
| 651 | if ( dt.cell( this ).index().column !== targetIdx ) {
|
|---|
| 652 | return;
|
|---|
| 653 | }
|
|---|
| 654 | }
|
|---|
| 655 |
|
|---|
| 656 | // $().closest() includes itself in its check
|
|---|
| 657 | var row = dt.row( $(this).closest('tr') );
|
|---|
| 658 |
|
|---|
| 659 | // Check event type to do an action
|
|---|
| 660 | if ( e.type === 'click' ) {
|
|---|
| 661 | // The renderer is given as a function so the caller can execute it
|
|---|
| 662 | // only when they need (i.e. if hiding there is no point is running
|
|---|
| 663 | // the renderer)
|
|---|
| 664 | that._detailsDisplay( row, false );
|
|---|
| 665 | }
|
|---|
| 666 | else if ( e.type === 'mousedown' ) {
|
|---|
| 667 | // For mouse users, prevent the focus ring from showing
|
|---|
| 668 | $(this).css('outline', 'none');
|
|---|
| 669 | }
|
|---|
| 670 | else if ( e.type === 'mouseup' ) {
|
|---|
| 671 | // And then re-allow at the end of the click
|
|---|
| 672 | $(this).blur().css('outline', '');
|
|---|
| 673 | }
|
|---|
| 674 | } );
|
|---|
| 675 | },
|
|---|
| 676 |
|
|---|
| 677 |
|
|---|
| 678 | /**
|
|---|
| 679 | * Get the details to pass to a renderer for a row
|
|---|
| 680 | * @param {int} rowIdx Row index
|
|---|
| 681 | * @private
|
|---|
| 682 | */
|
|---|
| 683 | _detailsObj: function ( rowIdx )
|
|---|
| 684 | {
|
|---|
| 685 | var that = this;
|
|---|
| 686 | var dt = this.s.dt;
|
|---|
| 687 |
|
|---|
| 688 | return $.map( this.s.columns, function( col, i ) {
|
|---|
| 689 | // Never and control columns should not be passed to the renderer
|
|---|
| 690 | if ( col.never || col.control ) {
|
|---|
| 691 | return;
|
|---|
| 692 | }
|
|---|
| 693 |
|
|---|
| 694 | return {
|
|---|
| 695 | title: dt.settings()[0].aoColumns[ i ].sTitle,
|
|---|
| 696 | data: dt.cell( rowIdx, i ).render( that.c.orthogonal ),
|
|---|
| 697 | hidden: dt.column( i ).visible() && !that.s.current[ i ],
|
|---|
| 698 | columnIndex: i,
|
|---|
| 699 | rowIndex: rowIdx
|
|---|
| 700 | };
|
|---|
| 701 | } );
|
|---|
| 702 | },
|
|---|
| 703 |
|
|---|
| 704 |
|
|---|
| 705 | /**
|
|---|
| 706 | * Find a breakpoint object from a name
|
|---|
| 707 | *
|
|---|
| 708 | * @param {string} name Breakpoint name to find
|
|---|
| 709 | * @return {object} Breakpoint description object
|
|---|
| 710 | * @private
|
|---|
| 711 | */
|
|---|
| 712 | _find: function ( name )
|
|---|
| 713 | {
|
|---|
| 714 | var breakpoints = this.c.breakpoints;
|
|---|
| 715 |
|
|---|
| 716 | for ( var i=0, ien=breakpoints.length ; i<ien ; i++ ) {
|
|---|
| 717 | if ( breakpoints[i].name === name ) {
|
|---|
| 718 | return breakpoints[i];
|
|---|
| 719 | }
|
|---|
| 720 | }
|
|---|
| 721 | },
|
|---|
| 722 |
|
|---|
| 723 |
|
|---|
| 724 | /**
|
|---|
| 725 | * Re-create the contents of the child rows as the display has changed in
|
|---|
| 726 | * some way.
|
|---|
| 727 | *
|
|---|
| 728 | * @private
|
|---|
| 729 | */
|
|---|
| 730 | _redrawChildren: function ()
|
|---|
| 731 | {
|
|---|
| 732 | var that = this;
|
|---|
| 733 | var dt = this.s.dt;
|
|---|
| 734 |
|
|---|
| 735 | dt.rows( {page: 'current'} ).iterator( 'row', function ( settings, idx ) {
|
|---|
| 736 | var row = dt.row( idx );
|
|---|
| 737 |
|
|---|
| 738 | that._detailsDisplay( dt.row( idx ), true );
|
|---|
| 739 | } );
|
|---|
| 740 | },
|
|---|
| 741 |
|
|---|
| 742 |
|
|---|
| 743 | /**
|
|---|
| 744 | * Alter the table display for a resized viewport. This involves first
|
|---|
| 745 | * determining what breakpoint the window currently is in, getting the
|
|---|
| 746 | * column visibilities to apply and then setting them.
|
|---|
| 747 | *
|
|---|
| 748 | * @private
|
|---|
| 749 | */
|
|---|
| 750 | _resize: function ()
|
|---|
| 751 | {
|
|---|
| 752 | var that = this;
|
|---|
| 753 | var dt = this.s.dt;
|
|---|
| 754 | var width = $(window).width();
|
|---|
| 755 | var breakpoints = this.c.breakpoints;
|
|---|
| 756 | var breakpoint = breakpoints[0].name;
|
|---|
| 757 | var columns = this.s.columns;
|
|---|
| 758 | var i, ien;
|
|---|
| 759 | var oldVis = this.s.current.slice();
|
|---|
| 760 |
|
|---|
| 761 | // Determine what breakpoint we are currently at
|
|---|
| 762 | for ( i=breakpoints.length-1 ; i>=0 ; i-- ) {
|
|---|
| 763 | if ( width <= breakpoints[i].width ) {
|
|---|
| 764 | breakpoint = breakpoints[i].name;
|
|---|
| 765 | break;
|
|---|
| 766 | }
|
|---|
| 767 | }
|
|---|
| 768 |
|
|---|
| 769 | // Show the columns for that break point
|
|---|
| 770 | var columnsVis = this._columnsVisiblity( breakpoint );
|
|---|
| 771 | this.s.current = columnsVis;
|
|---|
| 772 |
|
|---|
| 773 | // Set the class before the column visibility is changed so event
|
|---|
| 774 | // listeners know what the state is. Need to determine if there are
|
|---|
| 775 | // any columns that are not visible but can be shown
|
|---|
| 776 | var collapsedClass = false;
|
|---|
| 777 | for ( i=0, ien=columns.length ; i<ien ; i++ ) {
|
|---|
| 778 | if ( columnsVis[i] === false && ! columns[i].never && ! columns[i].control && ! dt.column(i).visible() === false ) {
|
|---|
| 779 | collapsedClass = true;
|
|---|
| 780 | break;
|
|---|
| 781 | }
|
|---|
| 782 | }
|
|---|
| 783 |
|
|---|
| 784 | $( dt.table().node() ).toggleClass( 'collapsed', collapsedClass );
|
|---|
| 785 |
|
|---|
| 786 | var changed = false;
|
|---|
| 787 | var visible = 0;
|
|---|
| 788 |
|
|---|
| 789 | dt.columns().eq(0).each( function ( colIdx, i ) {
|
|---|
| 790 | if ( columnsVis[i] === true ) {
|
|---|
| 791 | visible++;
|
|---|
| 792 | }
|
|---|
| 793 |
|
|---|
| 794 | if ( columnsVis[i] !== oldVis[i] ) {
|
|---|
| 795 | changed = true;
|
|---|
| 796 | that._setColumnVis( colIdx, columnsVis[i] );
|
|---|
| 797 | }
|
|---|
| 798 | } );
|
|---|
| 799 |
|
|---|
| 800 | if ( changed ) {
|
|---|
| 801 | this._redrawChildren();
|
|---|
| 802 |
|
|---|
| 803 | // Inform listeners of the change
|
|---|
| 804 | $(dt.table().node()).trigger( 'responsive-resize.dt', [dt, this.s.current] );
|
|---|
| 805 |
|
|---|
| 806 | // If no records, update the "No records" display element
|
|---|
| 807 | if ( dt.page.info().recordsDisplay === 0 ) {
|
|---|
| 808 | $('td', dt.table().body()).eq(0).attr('colspan', visible);
|
|---|
| 809 | }
|
|---|
| 810 | }
|
|---|
| 811 | },
|
|---|
| 812 |
|
|---|
| 813 |
|
|---|
| 814 | /**
|
|---|
| 815 | * Determine the width of each column in the table so the auto column hiding
|
|---|
| 816 | * has that information to work with. This method is never going to be 100%
|
|---|
| 817 | * perfect since column widths can change slightly per page, but without
|
|---|
| 818 | * seriously compromising performance this is quite effective.
|
|---|
| 819 | *
|
|---|
| 820 | * @private
|
|---|
| 821 | */
|
|---|
| 822 | _resizeAuto: function ()
|
|---|
| 823 | {
|
|---|
| 824 | var dt = this.s.dt;
|
|---|
| 825 | var columns = this.s.columns;
|
|---|
| 826 |
|
|---|
| 827 | // Are we allowed to do auto sizing?
|
|---|
| 828 | if ( ! this.c.auto ) {
|
|---|
| 829 | return;
|
|---|
| 830 | }
|
|---|
| 831 |
|
|---|
| 832 | // Are there any columns that actually need auto-sizing, or do they all
|
|---|
| 833 | // have classes defined
|
|---|
| 834 | if ( $.inArray( true, $.map( columns, function (c) { return c.auto; } ) ) === -1 ) {
|
|---|
| 835 | return;
|
|---|
| 836 | }
|
|---|
| 837 |
|
|---|
| 838 | // Need to restore all children. They will be reinstated by a re-render
|
|---|
| 839 | if ( ! $.isEmptyObject( _childNodeStore ) ) {
|
|---|
| 840 | $.each( _childNodeStore, function ( key ) {
|
|---|
| 841 | var idx = key.split('-');
|
|---|
| 842 |
|
|---|
| 843 | _childNodesRestore( dt, idx[0]*1, idx[1]*1 );
|
|---|
| 844 | } );
|
|---|
| 845 | }
|
|---|
| 846 |
|
|---|
| 847 | // Clone the table with the current data in it
|
|---|
| 848 | var tableWidth = dt.table().node().offsetWidth;
|
|---|
| 849 | var columnWidths = dt.columns;
|
|---|
| 850 | var clonedTable = dt.table().node().cloneNode( false );
|
|---|
| 851 | var clonedHeader = $( dt.table().header().cloneNode( false ) ).appendTo( clonedTable );
|
|---|
| 852 | var clonedBody = $( dt.table().body() ).clone( false, false ).empty().appendTo( clonedTable ); // use jQuery because of IE8
|
|---|
| 853 |
|
|---|
| 854 | // Header
|
|---|
| 855 | var headerCells = dt.columns()
|
|---|
| 856 | .header()
|
|---|
| 857 | .filter( function (idx) {
|
|---|
| 858 | return dt.column(idx).visible();
|
|---|
| 859 | } )
|
|---|
| 860 | .to$()
|
|---|
| 861 | .clone( false )
|
|---|
| 862 | .css( 'display', 'table-cell' )
|
|---|
| 863 | .css( 'min-width', 0 );
|
|---|
| 864 |
|
|---|
| 865 | // Body rows - we don't need to take account of DataTables' column
|
|---|
| 866 | // visibility since we implement our own here (hence the `display` set)
|
|---|
| 867 | $(clonedBody)
|
|---|
| 868 | .append( $(dt.rows( { page: 'current' } ).nodes()).clone( false ) )
|
|---|
| 869 | .find( 'th, td' ).css( 'display', '' );
|
|---|
| 870 |
|
|---|
| 871 | // Footer
|
|---|
| 872 | var footer = dt.table().footer();
|
|---|
| 873 | if ( footer ) {
|
|---|
| 874 | var clonedFooter = $( footer.cloneNode( false ) ).appendTo( clonedTable );
|
|---|
| 875 | var footerCells = dt.columns()
|
|---|
| 876 | .footer()
|
|---|
| 877 | .filter( function (idx) {
|
|---|
| 878 | return dt.column(idx).visible();
|
|---|
| 879 | } )
|
|---|
| 880 | .to$()
|
|---|
| 881 | .clone( false )
|
|---|
| 882 | .css( 'display', 'table-cell' );
|
|---|
| 883 |
|
|---|
| 884 | $('<tr/>')
|
|---|
| 885 | .append( footerCells )
|
|---|
| 886 | .appendTo( clonedFooter );
|
|---|
| 887 | }
|
|---|
| 888 |
|
|---|
| 889 | $('<tr/>')
|
|---|
| 890 | .append( headerCells )
|
|---|
| 891 | .appendTo( clonedHeader );
|
|---|
| 892 |
|
|---|
| 893 | // In the inline case extra padding is applied to the first column to
|
|---|
| 894 | // give space for the show / hide icon. We need to use this in the
|
|---|
| 895 | // calculation
|
|---|
| 896 | if ( this.c.details.type === 'inline' ) {
|
|---|
| 897 | $(clonedTable).addClass( 'dtr-inline collapsed' );
|
|---|
| 898 | }
|
|---|
| 899 |
|
|---|
| 900 | // It is unsafe to insert elements with the same name into the DOM
|
|---|
| 901 | // multiple times. For example, cloning and inserting a checked radio
|
|---|
| 902 | // clears the chcecked state of the original radio.
|
|---|
| 903 | $( clonedTable ).find( '[name]' ).removeAttr( 'name' );
|
|---|
| 904 |
|
|---|
| 905 | // A position absolute table would take the table out of the flow of
|
|---|
| 906 | // our container element, bypassing the height and width (Scroller)
|
|---|
| 907 | $( clonedTable ).css( 'position', 'relative' )
|
|---|
| 908 |
|
|---|
| 909 | var inserted = $('<div/>')
|
|---|
| 910 | .css( {
|
|---|
| 911 | width: 1,
|
|---|
| 912 | height: 1,
|
|---|
| 913 | overflow: 'hidden',
|
|---|
| 914 | clear: 'both'
|
|---|
| 915 | } )
|
|---|
| 916 | .append( clonedTable );
|
|---|
| 917 |
|
|---|
| 918 | inserted.insertBefore( dt.table().node() );
|
|---|
| 919 |
|
|---|
| 920 | // The cloned header now contains the smallest that each column can be
|
|---|
| 921 | headerCells.each( function (i) {
|
|---|
| 922 | var idx = dt.column.index( 'fromVisible', i );
|
|---|
| 923 | columns[ idx ].minWidth = this.offsetWidth || 0;
|
|---|
| 924 | } );
|
|---|
| 925 |
|
|---|
| 926 | inserted.remove();
|
|---|
| 927 | },
|
|---|
| 928 |
|
|---|
| 929 | /**
|
|---|
| 930 | * Set a column's visibility.
|
|---|
| 931 | *
|
|---|
| 932 | * We don't use DataTables' column visibility controls in order to ensure
|
|---|
| 933 | * that column visibility can Responsive can no-exist. Since only IE8+ is
|
|---|
| 934 | * supported (and all evergreen browsers of course) the control of the
|
|---|
| 935 | * display attribute works well.
|
|---|
| 936 | *
|
|---|
| 937 | * @param {integer} col Column index
|
|---|
| 938 | * @param {boolean} showHide Show or hide (true or false)
|
|---|
| 939 | * @private
|
|---|
| 940 | */
|
|---|
| 941 | _setColumnVis: function ( col, showHide )
|
|---|
| 942 | {
|
|---|
| 943 | var dt = this.s.dt;
|
|---|
| 944 | var display = showHide ? '' : 'none'; // empty string will remove the attr
|
|---|
| 945 |
|
|---|
| 946 | $( dt.column( col ).header() ).css( 'display', display );
|
|---|
| 947 | $( dt.column( col ).footer() ).css( 'display', display );
|
|---|
| 948 | dt.column( col ).nodes().to$().css( 'display', display );
|
|---|
| 949 |
|
|---|
| 950 | // If the are child nodes stored, we might need to reinsert them
|
|---|
| 951 | if ( ! $.isEmptyObject( _childNodeStore ) ) {
|
|---|
| 952 | dt.cells( null, col ).indexes().each( function (idx) {
|
|---|
| 953 | _childNodesRestore( dt, idx.row, idx.column );
|
|---|
| 954 | } );
|
|---|
| 955 | }
|
|---|
| 956 | },
|
|---|
| 957 |
|
|---|
| 958 |
|
|---|
| 959 | /**
|
|---|
| 960 | * Update the cell tab indexes for keyboard accessibility. This is called on
|
|---|
| 961 | * every table draw - that is potentially inefficient, but also the least
|
|---|
| 962 | * complex option given that column visibility can change on the fly. Its a
|
|---|
| 963 | * shame user-focus was removed from CSS 3 UI, as it would have solved this
|
|---|
| 964 | * issue with a single CSS statement.
|
|---|
| 965 | *
|
|---|
| 966 | * @private
|
|---|
| 967 | */
|
|---|
| 968 | _tabIndexes: function ()
|
|---|
| 969 | {
|
|---|
| 970 | var dt = this.s.dt;
|
|---|
| 971 | var cells = dt.cells( { page: 'current' } ).nodes().to$();
|
|---|
| 972 | var ctx = dt.settings()[0];
|
|---|
| 973 | var target = this.c.details.target;
|
|---|
| 974 |
|
|---|
| 975 | cells.filter( '[data-dtr-keyboard]' ).removeData( '[data-dtr-keyboard]' );
|
|---|
| 976 |
|
|---|
| 977 | if ( typeof target === 'number' ) {
|
|---|
| 978 | dt.cells( null, target, { page: 'current' } ).nodes().to$()
|
|---|
| 979 | .attr( 'tabIndex', ctx.iTabIndex )
|
|---|
| 980 | .data( 'dtr-keyboard', 1 );
|
|---|
| 981 | }
|
|---|
| 982 | else {
|
|---|
| 983 | // This is a bit of a hack - we need to limit the selected nodes to just
|
|---|
| 984 | // those of this table
|
|---|
| 985 | if ( target === 'td:first-child, th:first-child' ) {
|
|---|
| 986 | target = '>td:first-child, >th:first-child';
|
|---|
| 987 | }
|
|---|
| 988 |
|
|---|
| 989 | $( target, dt.rows( { page: 'current' } ).nodes() )
|
|---|
| 990 | .attr( 'tabIndex', ctx.iTabIndex )
|
|---|
| 991 | .data( 'dtr-keyboard', 1 );
|
|---|
| 992 | }
|
|---|
| 993 | }
|
|---|
| 994 | } );
|
|---|
| 995 |
|
|---|
| 996 |
|
|---|
| 997 | /**
|
|---|
| 998 | * List of default breakpoints. Each item in the array is an object with two
|
|---|
| 999 | * properties:
|
|---|
| 1000 | *
|
|---|
| 1001 | * * `name` - the breakpoint name.
|
|---|
| 1002 | * * `width` - the breakpoint width
|
|---|
| 1003 | *
|
|---|
| 1004 | * @name Responsive.breakpoints
|
|---|
| 1005 | * @static
|
|---|
| 1006 | */
|
|---|
| 1007 | Responsive.breakpoints = [
|
|---|
| 1008 | { name: 'desktop', width: Infinity },
|
|---|
| 1009 | { name: 'tablet-l', width: 1024 },
|
|---|
| 1010 | { name: 'tablet-p', width: 768 },
|
|---|
| 1011 | { name: 'mobile-l', width: 480 },
|
|---|
| 1012 | { name: 'mobile-p', width: 320 }
|
|---|
| 1013 | ];
|
|---|
| 1014 |
|
|---|
| 1015 |
|
|---|
| 1016 | /**
|
|---|
| 1017 | * Display methods - functions which define how the hidden data should be shown
|
|---|
| 1018 | * in the table.
|
|---|
| 1019 | *
|
|---|
| 1020 | * @namespace
|
|---|
| 1021 | * @name Responsive.defaults
|
|---|
| 1022 | * @static
|
|---|
| 1023 | */
|
|---|
| 1024 | Responsive.display = {
|
|---|
| 1025 | childRow: function ( row, update, render ) {
|
|---|
| 1026 | if ( update ) {
|
|---|
| 1027 | if ( $(row.node()).hasClass('parent') ) {
|
|---|
| 1028 | row.child( render(), 'child' ).show();
|
|---|
| 1029 |
|
|---|
| 1030 | return true;
|
|---|
| 1031 | }
|
|---|
| 1032 | }
|
|---|
| 1033 | else {
|
|---|
| 1034 | if ( ! row.child.isShown() ) {
|
|---|
| 1035 | row.child( render(), 'child' ).show();
|
|---|
| 1036 | $( row.node() ).addClass( 'parent' );
|
|---|
| 1037 |
|
|---|
| 1038 | return true;
|
|---|
| 1039 | }
|
|---|
| 1040 | else {
|
|---|
| 1041 | row.child( false );
|
|---|
| 1042 | $( row.node() ).removeClass( 'parent' );
|
|---|
| 1043 |
|
|---|
| 1044 | return false;
|
|---|
| 1045 | }
|
|---|
| 1046 | }
|
|---|
| 1047 | },
|
|---|
| 1048 |
|
|---|
| 1049 | childRowImmediate: function ( row, update, render ) {
|
|---|
| 1050 | if ( (! update && row.child.isShown()) || ! row.responsive.hasHidden() ) {
|
|---|
| 1051 | // User interaction and the row is show, or nothing to show
|
|---|
| 1052 | row.child( false );
|
|---|
| 1053 | $( row.node() ).removeClass( 'parent' );
|
|---|
| 1054 |
|
|---|
| 1055 | return false;
|
|---|
| 1056 | }
|
|---|
| 1057 | else {
|
|---|
| 1058 | // Display
|
|---|
| 1059 | row.child( render(), 'child' ).show();
|
|---|
| 1060 | $( row.node() ).addClass( 'parent' );
|
|---|
| 1061 |
|
|---|
| 1062 | return true;
|
|---|
| 1063 | }
|
|---|
| 1064 | },
|
|---|
| 1065 |
|
|---|
| 1066 | // This is a wrapper so the modal options for Bootstrap and jQuery UI can
|
|---|
| 1067 | // have options passed into them. This specific one doesn't need to be a
|
|---|
| 1068 | // function but it is for consistency in the `modal` name
|
|---|
| 1069 | modal: function ( options ) {
|
|---|
| 1070 | return function ( row, update, render ) {
|
|---|
| 1071 | if ( ! update ) {
|
|---|
| 1072 | // Show a modal
|
|---|
| 1073 | var close = function () {
|
|---|
| 1074 | modal.remove(); // will tidy events for us
|
|---|
| 1075 | $(document).off( 'keypress.dtr' );
|
|---|
| 1076 | };
|
|---|
| 1077 |
|
|---|
| 1078 | var modal = $('<div class="dtr-modal"/>')
|
|---|
| 1079 | .append( $('<div class="dtr-modal-display"/>')
|
|---|
| 1080 | .append( $('<div class="dtr-modal-content"/>')
|
|---|
| 1081 | .append( render() )
|
|---|
| 1082 | )
|
|---|
| 1083 | .append( $('<div class="dtr-modal-close">×</div>' )
|
|---|
| 1084 | .click( function () {
|
|---|
| 1085 | close();
|
|---|
| 1086 | } )
|
|---|
| 1087 | )
|
|---|
| 1088 | )
|
|---|
| 1089 | .append( $('<div class="dtr-modal-background"/>')
|
|---|
| 1090 | .click( function () {
|
|---|
| 1091 | close();
|
|---|
| 1092 | } )
|
|---|
| 1093 | )
|
|---|
| 1094 | .appendTo( 'body' );
|
|---|
| 1095 |
|
|---|
| 1096 | $(document).on( 'keyup.dtr', function (e) {
|
|---|
| 1097 | if ( e.keyCode === 27 ) {
|
|---|
| 1098 | e.stopPropagation();
|
|---|
| 1099 |
|
|---|
| 1100 | close();
|
|---|
| 1101 | }
|
|---|
| 1102 | } );
|
|---|
| 1103 | }
|
|---|
| 1104 | else {
|
|---|
| 1105 | $('div.dtr-modal-content')
|
|---|
| 1106 | .empty()
|
|---|
| 1107 | .append( render() );
|
|---|
| 1108 | }
|
|---|
| 1109 |
|
|---|
| 1110 | if ( options && options.header ) {
|
|---|
| 1111 | $('div.dtr-modal-content').prepend(
|
|---|
| 1112 | '<h2>'+options.header( row )+'</h2>'
|
|---|
| 1113 | );
|
|---|
| 1114 | }
|
|---|
| 1115 | };
|
|---|
| 1116 | }
|
|---|
| 1117 | };
|
|---|
| 1118 |
|
|---|
| 1119 |
|
|---|
| 1120 | var _childNodeStore = {};
|
|---|
| 1121 |
|
|---|
| 1122 | function _childNodes( dt, row, col ) {
|
|---|
| 1123 | var name = row+'-'+col;
|
|---|
| 1124 |
|
|---|
| 1125 | if ( _childNodeStore[ name ] ) {
|
|---|
| 1126 | return _childNodeStore[ name ];
|
|---|
| 1127 | }
|
|---|
| 1128 |
|
|---|
| 1129 | // https://jsperf.com/childnodes-array-slice-vs-loop
|
|---|
| 1130 | var nodes = [];
|
|---|
| 1131 | var children = dt.cell( row, col ).node().childNodes;
|
|---|
| 1132 | for ( var i=0, ien=children.length ; i<ien ; i++ ) {
|
|---|
| 1133 | nodes.push( children[i] );
|
|---|
| 1134 | }
|
|---|
| 1135 |
|
|---|
| 1136 | _childNodeStore[ name ] = nodes;
|
|---|
| 1137 |
|
|---|
| 1138 | return nodes;
|
|---|
| 1139 | }
|
|---|
| 1140 |
|
|---|
| 1141 | function _childNodesRestore( dt, row, col ) {
|
|---|
| 1142 | var name = row+'-'+col;
|
|---|
| 1143 |
|
|---|
| 1144 | if ( ! _childNodeStore[ name ] ) {
|
|---|
| 1145 | return;
|
|---|
| 1146 | }
|
|---|
| 1147 |
|
|---|
| 1148 | var node = dt.cell( row, col ).node();
|
|---|
| 1149 | var store = _childNodeStore[ name ];
|
|---|
| 1150 | var parent = store[0].parentNode;
|
|---|
| 1151 | var parentChildren = parent.childNodes;
|
|---|
| 1152 | var a = [];
|
|---|
| 1153 |
|
|---|
| 1154 | for ( var i=0, ien=parentChildren.length ; i<ien ; i++ ) {
|
|---|
| 1155 | a.push( parentChildren[i] );
|
|---|
| 1156 | }
|
|---|
| 1157 |
|
|---|
| 1158 | for ( var j=0, jen=a.length ; j<jen ; j++ ) {
|
|---|
| 1159 | node.appendChild( a[j] );
|
|---|
| 1160 | }
|
|---|
| 1161 |
|
|---|
| 1162 | _childNodeStore[ name ] = undefined;
|
|---|
| 1163 | }
|
|---|
| 1164 |
|
|---|
| 1165 |
|
|---|
| 1166 | /**
|
|---|
| 1167 | * Display methods - functions which define how the hidden data should be shown
|
|---|
| 1168 | * in the table.
|
|---|
| 1169 | *
|
|---|
| 1170 | * @namespace
|
|---|
| 1171 | * @name Responsive.defaults
|
|---|
| 1172 | * @static
|
|---|
| 1173 | */
|
|---|
| 1174 | Responsive.renderer = {
|
|---|
| 1175 | listHiddenNodes: function () {
|
|---|
| 1176 | return function ( api, rowIdx, columns ) {
|
|---|
| 1177 | var ul = $('<ul data-dtr-index="'+rowIdx+'" class="dtr-details"/>');
|
|---|
| 1178 | var found = false;
|
|---|
| 1179 |
|
|---|
| 1180 | var data = $.each( columns, function ( i, col ) {
|
|---|
| 1181 | if ( col.hidden ) {
|
|---|
| 1182 | $(
|
|---|
| 1183 | '<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
|
|---|
| 1184 | '<span class="dtr-title">'+
|
|---|
| 1185 | col.title+
|
|---|
| 1186 | '</span> '+
|
|---|
| 1187 | '</li>'
|
|---|
| 1188 | )
|
|---|
| 1189 | .append( $('<span class="dtr-data"/>').append( _childNodes( api, col.rowIndex, col.columnIndex ) ) )// api.cell( col.rowIndex, col.columnIndex ).node().childNodes ) )
|
|---|
| 1190 | .appendTo( ul );
|
|---|
| 1191 |
|
|---|
| 1192 | found = true;
|
|---|
| 1193 | }
|
|---|
| 1194 | } );
|
|---|
| 1195 |
|
|---|
| 1196 | return found ?
|
|---|
| 1197 | ul :
|
|---|
| 1198 | false;
|
|---|
| 1199 | };
|
|---|
| 1200 | },
|
|---|
| 1201 |
|
|---|
| 1202 | listHidden: function () {
|
|---|
| 1203 | return function ( api, rowIdx, columns ) {
|
|---|
| 1204 | var data = $.map( columns, function ( col ) {
|
|---|
| 1205 | return col.hidden ?
|
|---|
| 1206 | '<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
|
|---|
| 1207 | '<span class="dtr-title">'+
|
|---|
| 1208 | col.title+
|
|---|
| 1209 | '</span> '+
|
|---|
| 1210 | '<span class="dtr-data">'+
|
|---|
| 1211 | col.data+
|
|---|
| 1212 | '</span>'+
|
|---|
| 1213 | '</li>' :
|
|---|
| 1214 | '';
|
|---|
| 1215 | } ).join('');
|
|---|
| 1216 |
|
|---|
| 1217 | return data ?
|
|---|
| 1218 | $('<ul data-dtr-index="'+rowIdx+'" class="dtr-details"/>').append( data ) :
|
|---|
| 1219 | false;
|
|---|
| 1220 | }
|
|---|
| 1221 | },
|
|---|
| 1222 |
|
|---|
| 1223 | tableAll: function ( options ) {
|
|---|
| 1224 | options = $.extend( {
|
|---|
| 1225 | tableClass: ''
|
|---|
| 1226 | }, options );
|
|---|
| 1227 |
|
|---|
| 1228 | return function ( api, rowIdx, columns ) {
|
|---|
| 1229 | var data = $.map( columns, function ( col ) {
|
|---|
| 1230 | return '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
|
|---|
| 1231 | '<td>'+col.title+':'+'</td> '+
|
|---|
| 1232 | '<td>'+col.data+'</td>'+
|
|---|
| 1233 | '</tr>';
|
|---|
| 1234 | } ).join('');
|
|---|
| 1235 |
|
|---|
| 1236 | return $('<table class="'+options.tableClass+' dtr-details" width="100%"/>').append( data );
|
|---|
| 1237 | }
|
|---|
| 1238 | }
|
|---|
| 1239 | };
|
|---|
| 1240 |
|
|---|
| 1241 | /**
|
|---|
| 1242 | * Responsive default settings for initialisation
|
|---|
| 1243 | *
|
|---|
| 1244 | * @namespace
|
|---|
| 1245 | * @name Responsive.defaults
|
|---|
| 1246 | * @static
|
|---|
| 1247 | */
|
|---|
| 1248 | Responsive.defaults = {
|
|---|
| 1249 | /**
|
|---|
| 1250 | * List of breakpoints for the instance. Note that this means that each
|
|---|
| 1251 | * instance can have its own breakpoints. Additionally, the breakpoints
|
|---|
| 1252 | * cannot be changed once an instance has been creased.
|
|---|
| 1253 | *
|
|---|
| 1254 | * @type {Array}
|
|---|
| 1255 | * @default Takes the value of `Responsive.breakpoints`
|
|---|
| 1256 | */
|
|---|
| 1257 | breakpoints: Responsive.breakpoints,
|
|---|
| 1258 |
|
|---|
| 1259 | /**
|
|---|
| 1260 | * Enable / disable auto hiding calculations. It can help to increase
|
|---|
| 1261 | * performance slightly if you disable this option, but all columns would
|
|---|
| 1262 | * need to have breakpoint classes assigned to them
|
|---|
| 1263 | *
|
|---|
| 1264 | * @type {Boolean}
|
|---|
| 1265 | * @default `true`
|
|---|
| 1266 | */
|
|---|
| 1267 | auto: true,
|
|---|
| 1268 |
|
|---|
| 1269 | /**
|
|---|
| 1270 | * Details control. If given as a string value, the `type` property of the
|
|---|
| 1271 | * default object is set to that value, and the defaults used for the rest
|
|---|
| 1272 | * of the object - this is for ease of implementation.
|
|---|
| 1273 | *
|
|---|
| 1274 | * The object consists of the following properties:
|
|---|
| 1275 | *
|
|---|
| 1276 | * * `display` - A function that is used to show and hide the hidden details
|
|---|
| 1277 | * * `renderer` - function that is called for display of the child row data.
|
|---|
| 1278 | * The default function will show the data from the hidden columns
|
|---|
| 1279 | * * `target` - Used as the selector for what objects to attach the child
|
|---|
| 1280 | * open / close to
|
|---|
| 1281 | * * `type` - `false` to disable the details display, `inline` or `column`
|
|---|
| 1282 | * for the two control types
|
|---|
| 1283 | *
|
|---|
| 1284 | * @type {Object|string}
|
|---|
| 1285 | */
|
|---|
| 1286 | details: {
|
|---|
| 1287 | display: Responsive.display.childRow,
|
|---|
| 1288 |
|
|---|
| 1289 | renderer: Responsive.renderer.listHidden(),
|
|---|
| 1290 |
|
|---|
| 1291 | target: 0,
|
|---|
| 1292 |
|
|---|
| 1293 | type: 'inline'
|
|---|
| 1294 | },
|
|---|
| 1295 |
|
|---|
| 1296 | /**
|
|---|
| 1297 | * Orthogonal data request option. This is used to define the data type
|
|---|
| 1298 | * requested when Responsive gets the data to show in the child row.
|
|---|
| 1299 | *
|
|---|
| 1300 | * @type {String}
|
|---|
| 1301 | */
|
|---|
| 1302 | orthogonal: 'display'
|
|---|
| 1303 | };
|
|---|
| 1304 |
|
|---|
| 1305 |
|
|---|
| 1306 | /*
|
|---|
| 1307 | * API
|
|---|
| 1308 | */
|
|---|
| 1309 | var Api = $.fn.dataTable.Api;
|
|---|
| 1310 |
|
|---|
| 1311 | // Doesn't do anything - work around for a bug in DT... Not documented
|
|---|
| 1312 | Api.register( 'responsive()', function () {
|
|---|
| 1313 | return this;
|
|---|
| 1314 | } );
|
|---|
| 1315 |
|
|---|
| 1316 | Api.register( 'responsive.index()', function ( li ) {
|
|---|
| 1317 | li = $(li);
|
|---|
| 1318 |
|
|---|
| 1319 | return {
|
|---|
| 1320 | column: li.data('dtr-index'),
|
|---|
| 1321 | row: li.parent().data('dtr-index')
|
|---|
| 1322 | };
|
|---|
| 1323 | } );
|
|---|
| 1324 |
|
|---|
| 1325 | Api.register( 'responsive.rebuild()', function () {
|
|---|
| 1326 | return this.iterator( 'table', function ( ctx ) {
|
|---|
| 1327 | if ( ctx._responsive ) {
|
|---|
| 1328 | ctx._responsive._classLogic();
|
|---|
| 1329 | }
|
|---|
| 1330 | } );
|
|---|
| 1331 | } );
|
|---|
| 1332 |
|
|---|
| 1333 | Api.register( 'responsive.recalc()', function () {
|
|---|
| 1334 | return this.iterator( 'table', function ( ctx ) {
|
|---|
| 1335 | if ( ctx._responsive ) {
|
|---|
| 1336 | ctx._responsive._resizeAuto();
|
|---|
| 1337 | ctx._responsive._resize();
|
|---|
| 1338 | }
|
|---|
| 1339 | } );
|
|---|
| 1340 | } );
|
|---|
| 1341 |
|
|---|
| 1342 | Api.register( 'responsive.hasHidden()', function () {
|
|---|
| 1343 | var ctx = this.context[0];
|
|---|
| 1344 |
|
|---|
| 1345 | return ctx._responsive ?
|
|---|
| 1346 | $.inArray( false, ctx._responsive.s.current ) !== -1 :
|
|---|
| 1347 | false;
|
|---|
| 1348 | } );
|
|---|
| 1349 |
|
|---|
| 1350 | Api.registerPlural( 'columns().responsiveHidden()', 'column().responsiveHidden()', function () {
|
|---|
| 1351 | return this.iterator( 'column', function ( settings, column ) {
|
|---|
| 1352 | return settings._responsive ?
|
|---|
| 1353 | settings._responsive.s.current[ column ] :
|
|---|
| 1354 | false;
|
|---|
| 1355 | }, 1 );
|
|---|
| 1356 | } );
|
|---|
| 1357 |
|
|---|
| 1358 |
|
|---|
| 1359 | /**
|
|---|
| 1360 | * Version information
|
|---|
| 1361 | *
|
|---|
| 1362 | * @name Responsive.version
|
|---|
| 1363 | * @static
|
|---|
| 1364 | */
|
|---|
| 1365 | Responsive.version = '2.2.3';
|
|---|
| 1366 |
|
|---|
| 1367 |
|
|---|
| 1368 | $.fn.dataTable.Responsive = Responsive;
|
|---|
| 1369 | $.fn.DataTable.Responsive = Responsive;
|
|---|
| 1370 |
|
|---|
| 1371 | // Attach a listener to the document which listens for DataTables initialisation
|
|---|
| 1372 | // events so we can automatically initialise
|
|---|
| 1373 | $(document).on( 'preInit.dt.dtr', function (e, settings, json) {
|
|---|
| 1374 | if ( e.namespace !== 'dt' ) {
|
|---|
| 1375 | return;
|
|---|
| 1376 | }
|
|---|
| 1377 |
|
|---|
| 1378 | if ( $(settings.nTable).hasClass( 'responsive' ) ||
|
|---|
| 1379 | $(settings.nTable).hasClass( 'dt-responsive' ) ||
|
|---|
| 1380 | settings.oInit.responsive ||
|
|---|
| 1381 | DataTable.defaults.responsive
|
|---|
| 1382 | ) {
|
|---|
| 1383 | var init = settings.oInit.responsive;
|
|---|
| 1384 |
|
|---|
| 1385 | if ( init !== false ) {
|
|---|
| 1386 | new Responsive( settings, $.isPlainObject( init ) ? init : {} );
|
|---|
| 1387 | }
|
|---|
| 1388 | }
|
|---|
| 1389 | } );
|
|---|
| 1390 |
|
|---|
| 1391 |
|
|---|
| 1392 | return Responsive;
|
|---|
| 1393 | }));
|
|---|
