|
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474 |
- /*! Responsive 2.2.9
- * 2014-2021 SpryMedia Ltd - datatables.net/license
- */
-
- /**
- * @summary Responsive
- * @description Responsive tables plug-in for DataTables
- * @version 2.2.9
- * @file dataTables.responsive.js
- * @author SpryMedia Ltd (www.sprymedia.co.uk)
- * @contact www.sprymedia.co.uk/contact
- * @copyright Copyright 2014-2021 SpryMedia Ltd.
- *
- * This source file is free software, available under the following license:
- * MIT license - http://datatables.net/license/mit
- *
- * This source file is distributed in the hope that it will be useful, but
- * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
- * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
- *
- * For details please refer to: http://www.datatables.net
- */
- (function( factory ){
- if ( typeof define === 'function' && define.amd ) {
- // AMD
- define( ['jquery', 'datatables.net'], function ( $ ) {
- return factory( $, window, document );
- } );
- }
- else if ( typeof exports === 'object' ) {
- // CommonJS
- module.exports = function (root, $) {
- if ( ! root ) {
- root = window;
- }
-
- if ( ! $ || ! $.fn.dataTable ) {
- $ = require('datatables.net')(root, $).$;
- }
-
- return factory( $, root, root.document );
- };
- }
- else {
- // Browser
- factory( jQuery, window, document );
- }
- }(function( $, window, document, undefined ) {
- 'use strict';
- var DataTable = $.fn.dataTable;
-
-
- /**
- * Responsive is a plug-in for the DataTables library that makes use of
- * DataTables' ability to change the visibility of columns, changing the
- * visibility of columns so the displayed columns fit into the table container.
- * The end result is that complex tables will be dynamically adjusted to fit
- * into the viewport, be it on a desktop, tablet or mobile browser.
- *
- * Responsive for DataTables has two modes of operation, which can used
- * individually or combined:
- *
- * * Class name based control - columns assigned class names that match the
- * breakpoint logic can be shown / hidden as required for each breakpoint.
- * * Automatic control - columns are automatically hidden when there is no
- * room left to display them. Columns removed from the right.
- *
- * In additional to column visibility control, Responsive also has built into
- * options to use DataTables' child row display to show / hide the information
- * from the table that has been hidden. There are also two modes of operation
- * for this child row display:
- *
- * * Inline - when the control element that the user can use to show / hide
- * child rows is displayed inside the first column of the table.
- * * Column - where a whole column is dedicated to be the show / hide control.
- *
- * Initialisation of Responsive is performed by:
- *
- * * Adding the class `responsive` or `dt-responsive` to the table. In this case
- * Responsive will automatically be initialised with the default configuration
- * options when the DataTable is created.
- * * Using the `responsive` option in the DataTables configuration options. This
- * can also be used to specify the configuration options, or simply set to
- * `true` to use the defaults.
- *
- * @class
- * @param {object} settings DataTables settings object for the host table
- * @param {object} [opts] Configuration options
- * @requires jQuery 1.7+
- * @requires DataTables 1.10.3+
- *
- * @example
- * $('#example').DataTable( {
- * responsive: true
- * } );
- * } );
- */
- var Responsive = function ( settings, opts ) {
- // Sanity check that we are using DataTables 1.10 or newer
- if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.10.10' ) ) {
- throw 'DataTables Responsive requires DataTables 1.10.10 or newer';
- }
-
- this.s = {
- dt: new DataTable.Api( settings ),
- columns: [],
- current: []
- };
-
- // Check if responsive has already been initialised on this table
- if ( this.s.dt.settings()[0].responsive ) {
- return;
- }
-
- // details is an object, but for simplicity the user can give it as a string
- // or a boolean
- if ( opts && typeof opts.details === 'string' ) {
- opts.details = { type: opts.details };
- }
- else if ( opts && opts.details === false ) {
- opts.details = { type: false };
- }
- else if ( opts && opts.details === true ) {
- opts.details = { type: 'inline' };
- }
-
- this.c = $.extend( true, {}, Responsive.defaults, DataTable.defaults.responsive, opts );
- settings.responsive = this;
- this._constructor();
- };
-
- $.extend( Responsive.prototype, {
- /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
- * Constructor
- */
-
- /**
- * Initialise the Responsive instance
- *
- * @private
- */
- _constructor: function ()
- {
- var that = this;
- var dt = this.s.dt;
- var dtPrivateSettings = dt.settings()[0];
- var oldWindowWidth = $(window).innerWidth();
-
- dt.settings()[0]._responsive = this;
-
- // Use DataTables' throttle function to avoid processor thrashing on
- // resize
- $(window).on( 'resize.dtr orientationchange.dtr', DataTable.util.throttle( function () {
- // iOS has a bug whereby resize can fire when only scrolling
- // See: http://stackoverflow.com/questions/8898412
- var width = $(window).innerWidth();
-
- if ( width !== oldWindowWidth ) {
- that._resize();
- oldWindowWidth = width;
- }
- } ) );
-
- // DataTables doesn't currently trigger an event when a row is added, so
- // we need to hook into its private API to enforce the hidden rows when
- // new data is added
- dtPrivateSettings.oApi._fnCallbackReg( dtPrivateSettings, 'aoRowCreatedCallback', function (tr, data, idx) {
- if ( $.inArray( false, that.s.current ) !== -1 ) {
- $('>td, >th', tr).each( function ( i ) {
- var idx = dt.column.index( 'toData', i );
-
- if ( that.s.current[idx] === false ) {
- $(this).css('display', 'none');
- }
- } );
- }
- } );
-
- // Destroy event handler
- dt.on( 'destroy.dtr', function () {
- dt.off( '.dtr' );
- $( dt.table().body() ).off( '.dtr' );
- $(window).off( 'resize.dtr orientationchange.dtr' );
- dt.cells('.dtr-control').nodes().to$().removeClass('dtr-control');
-
- // Restore the columns that we've hidden
- $.each( that.s.current, function ( i, val ) {
- if ( val === false ) {
- that._setColumnVis( i, true );
- }
- } );
- } );
-
- // Reorder the breakpoints array here in case they have been added out
- // of order
- this.c.breakpoints.sort( function (a, b) {
- return a.width < b.width ? 1 :
- a.width > b.width ? -1 : 0;
- } );
-
- this._classLogic();
- this._resizeAuto();
-
- // Details handler
- var details = this.c.details;
-
- if ( details.type !== false ) {
- that._detailsInit();
-
- // DataTables will trigger this event on every column it shows and
- // hides individually
- dt.on( 'column-visibility.dtr', function () {
- // Use a small debounce to allow multiple columns to be set together
- if ( that._timer ) {
- clearTimeout( that._timer );
- }
-
- that._timer = setTimeout( function () {
- that._timer = null;
-
- that._classLogic();
- that._resizeAuto();
- that._resize(true);
-
- that._redrawChildren();
- }, 100 );
- } );
-
- // Redraw the details box on each draw which will happen if the data
- // has changed. This is used until DataTables implements a native
- // `updated` event for rows
- dt.on( 'draw.dtr', function () {
- that._redrawChildren();
- } );
-
- $(dt.table().node()).addClass( 'dtr-'+details.type );
- }
-
- dt.on( 'column-reorder.dtr', function (e, settings, details) {
- that._classLogic();
- that._resizeAuto();
- that._resize(true);
- } );
-
- // Change in column sizes means we need to calc
- dt.on( 'column-sizing.dtr', function () {
- that._resizeAuto();
- that._resize();
- });
-
- // On Ajax reload we want to reopen any child rows which are displayed
- // by responsive
- dt.on( 'preXhr.dtr', function () {
- var rowIds = [];
- dt.rows().every( function () {
- if ( this.child.isShown() ) {
- rowIds.push( this.id(true) );
- }
- } );
-
- dt.one( 'draw.dtr', function () {
- that._resizeAuto();
- that._resize();
-
- dt.rows( rowIds ).every( function () {
- that._detailsDisplay( this, false );
- } );
- } );
- });
-
- dt
- .on( 'draw.dtr', function () {
- that._controlClass();
- })
- .on( 'init.dtr', function (e, settings, details) {
- if ( e.namespace !== 'dt' ) {
- return;
- }
-
- that._resizeAuto();
- that._resize();
-
- // If columns were hidden, then DataTables needs to adjust the
- // column sizing
- if ( $.inArray( false, that.s.current ) ) {
- dt.columns.adjust();
- }
- } );
-
- // First pass - draw the table for the current viewport size
- this._resize();
- },
-
-
- /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
- * Private methods
- */
-
- /**
- * Calculate the visibility for the columns in a table for a given
- * breakpoint. The result is pre-determined based on the class logic if
- * class names are used to control all columns, but the width of the table
- * is also used if there are columns which are to be automatically shown
- * and hidden.
- *
- * @param {string} breakpoint Breakpoint name to use for the calculation
- * @return {array} Array of boolean values initiating the visibility of each
- * column.
- * @private
- */
- _columnsVisiblity: function ( breakpoint )
- {
- var dt = this.s.dt;
- var columns = this.s.columns;
- var i, ien;
-
- // Create an array that defines the column ordering based first on the
- // column's priority, and secondly the column index. This allows the
- // columns to be removed from the right if the priority matches
- var order = columns
- .map( function ( col, idx ) {
- return {
- columnIdx: idx,
- priority: col.priority
- };
- } )
- .sort( function ( a, b ) {
- if ( a.priority !== b.priority ) {
- return a.priority - b.priority;
- }
- return a.columnIdx - b.columnIdx;
- } );
-
- // Class logic - determine which columns are in this breakpoint based
- // on the classes. If no class control (i.e. `auto`) then `-` is used
- // to indicate this to the rest of the function
- var display = $.map( columns, function ( col, i ) {
- if ( dt.column(i).visible() === false ) {
- return 'not-visible';
- }
- return col.auto && col.minWidth === null ?
- false :
- col.auto === true ?
- '-' :
- $.inArray( breakpoint, col.includeIn ) !== -1;
- } );
-
- // Auto column control - first pass: how much width is taken by the
- // ones that must be included from the non-auto columns
- var requiredWidth = 0;
- for ( i=0, ien=display.length ; i<ien ; i++ ) {
- if ( display[i] === true ) {
- requiredWidth += columns[i].minWidth;
- }
- }
-
- // Second pass, use up any remaining width for other columns. For
- // scrolling tables we need to subtract the width of the scrollbar. It
- // may not be requires which makes this sub-optimal, but it would
- // require another full redraw to make complete use of those extra few
- // pixels
- var scrolling = dt.settings()[0].oScroll;
- var bar = scrolling.sY || scrolling.sX ? scrolling.iBarWidth : 0;
- var widthAvailable = dt.table().container().offsetWidth - bar;
- var usedWidth = widthAvailable - requiredWidth;
-
- // Control column needs to always be included. This makes it sub-
- // optimal in terms of using the available with, but to stop layout
- // thrashing or overflow. Also we need to account for the control column
- // width first so we know how much width is available for the other
- // columns, since the control column might not be the first one shown
- for ( i=0, ien=display.length ; i<ien ; i++ ) {
- if ( columns[i].control ) {
- usedWidth -= columns[i].minWidth;
- }
- }
-
- // Allow columns to be shown (counting by priority and then right to
- // left) until we run out of room
- var empty = false;
- for ( i=0, ien=order.length ; i<ien ; i++ ) {
- var colIdx = order[i].columnIdx;
-
- if ( display[colIdx] === '-' && ! columns[colIdx].control && columns[colIdx].minWidth ) {
- // Once we've found a column that won't fit we don't let any
- // others display either, or columns might disappear in the
- // middle of the table
- if ( empty || usedWidth - columns[colIdx].minWidth < 0 ) {
- empty = true;
- display[colIdx] = false;
- }
- else {
- display[colIdx] = true;
- }
-
- usedWidth -= columns[colIdx].minWidth;
- }
- }
-
- // Determine if the 'control' column should be shown (if there is one).
- // This is the case when there is a hidden column (that is not the
- // control column). The two loops look inefficient here, but they are
- // trivial and will fly through. We need to know the outcome from the
- // first , before the action in the second can be taken
- var showControl = false;
-
- for ( i=0, ien=columns.length ; i<ien ; i++ ) {
- if ( ! columns[i].control && ! columns[i].never && display[i] === false ) {
- showControl = true;
- break;
- }
- }
-
- for ( i=0, ien=columns.length ; i<ien ; i++ ) {
- if ( columns[i].control ) {
- display[i] = showControl;
- }
-
- // Replace not visible string with false from the control column detection above
- if ( display[i] === 'not-visible' ) {
- display[i] = false;
- }
- }
-
- // Finally we need to make sure that there is at least one column that
- // is visible
- if ( $.inArray( true, display ) === -1 ) {
- display[0] = true;
- }
-
- return display;
- },
-
-
- /**
- * Create the internal `columns` array with information about the columns
- * for the table. This includes determining which breakpoints the column
- * will appear in, based upon class names in the column, which makes up the
- * vast majority of this method.
- *
- * @private
- */
- _classLogic: function ()
- {
- var that = this;
- var calc = {};
- var breakpoints = this.c.breakpoints;
- var dt = this.s.dt;
- var columns = dt.columns().eq(0).map( function (i) {
- var column = this.column(i);
- var className = column.header().className;
- var priority = dt.settings()[0].aoColumns[i].responsivePriority;
- var dataPriority = column.header().getAttribute('data-priority');
-
- if ( priority === undefined ) {
- priority = dataPriority === undefined || dataPriority === null?
- 10000 :
- dataPriority * 1;
- }
-
- return {
- className: className,
- includeIn: [],
- auto: false,
- control: false,
- never: className.match(/\bnever\b/) ? true : false,
- priority: priority
- };
- } );
-
- // Simply add a breakpoint to `includeIn` array, ensuring that there are
- // no duplicates
- var add = function ( colIdx, name ) {
- var includeIn = columns[ colIdx ].includeIn;
-
- if ( $.inArray( name, includeIn ) === -1 ) {
- includeIn.push( name );
- }
- };
-
- var column = function ( colIdx, name, operator, matched ) {
- var size, i, ien;
-
- if ( ! operator ) {
- columns[ colIdx ].includeIn.push( name );
- }
- else if ( operator === 'max-' ) {
- // Add this breakpoint and all smaller
- size = that._find( name ).width;
-
- for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
- if ( breakpoints[i].width <= size ) {
- add( colIdx, breakpoints[i].name );
- }
- }
- }
- else if ( operator === 'min-' ) {
- // Add this breakpoint and all larger
- size = that._find( name ).width;
-
- for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
- if ( breakpoints[i].width >= size ) {
- add( colIdx, breakpoints[i].name );
- }
- }
- }
- else if ( operator === 'not-' ) {
- // Add all but this breakpoint
- for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
- if ( breakpoints[i].name.indexOf( matched ) === -1 ) {
- add( colIdx, breakpoints[i].name );
- }
- }
- }
- };
-
- // Loop over each column and determine if it has a responsive control
- // class
- columns.each( function ( col, i ) {
- var classNames = col.className.split(' ');
- var hasClass = false;
-
- // Split the class name up so multiple rules can be applied if needed
- for ( var k=0, ken=classNames.length ; k<ken ; k++ ) {
- var className = classNames[k].trim();
-
- if ( className === 'all' ) {
- // Include in all
- hasClass = true;
- col.includeIn = $.map( breakpoints, function (a) {
- return a.name;
- } );
- return;
- }
- else if ( className === 'none' || col.never ) {
- // Include in none (default) and no auto
- hasClass = true;
- return;
- }
- else if ( className === 'control' || className === 'dtr-control' ) {
- // Special column that is only visible, when one of the other
- // columns is hidden. This is used for the details control
- hasClass = true;
- col.control = true;
- return;
- }
-
- $.each( breakpoints, function ( j, breakpoint ) {
- // Does this column have a class that matches this breakpoint?
- var brokenPoint = breakpoint.name.split('-');
- var re = new RegExp( '(min\\-|max\\-|not\\-)?('+brokenPoint[0]+')(\\-[_a-zA-Z0-9])?' );
- var match = className.match( re );
-
- if ( match ) {
- hasClass = true;
-
- if ( match[2] === brokenPoint[0] && match[3] === '-'+brokenPoint[1] ) {
- // Class name matches breakpoint name fully
- column( i, breakpoint.name, match[1], match[2]+match[3] );
- }
- else if ( match[2] === brokenPoint[0] && ! match[3] ) {
- // Class name matched primary breakpoint name with no qualifier
- column( i, breakpoint.name, match[1], match[2] );
- }
- }
- } );
- }
-
- // If there was no control class, then automatic sizing is used
- if ( ! hasClass ) {
- col.auto = true;
- }
- } );
-
- this.s.columns = columns;
- },
-
- /**
- * Update the cells to show the correct control class / button
- * @private
- */
- _controlClass: function ()
- {
- if ( this.c.details.type === 'inline' ) {
- var dt = this.s.dt;
- var columnsVis = this.s.current;
- var firstVisible = $.inArray(true, columnsVis);
-
- // Remove from any cells which shouldn't have it
- dt.cells(
- null,
- function(idx) {
- return idx !== firstVisible;
- },
- {page: 'current'}
- )
- .nodes()
- .to$()
- .filter('.dtr-control')
- .removeClass('dtr-control');
-
- dt.cells(null, firstVisible, {page: 'current'})
- .nodes()
- .to$()
- .addClass('dtr-control');
- }
- },
-
- /**
- * Show the details for the child row
- *
- * @param {DataTables.Api} row API instance for the row
- * @param {boolean} update Update flag
- * @private
- */
- _detailsDisplay: function ( row, update )
- {
- var that = this;
- var dt = this.s.dt;
- var details = this.c.details;
-
- if ( details && details.type !== false ) {
- var res = details.display( row, update, function () {
- return details.renderer(
- dt, row[0], that._detailsObj(row[0])
- );
- } );
-
- if ( res === true || res === false ) {
- $(dt.table().node()).triggerHandler( 'responsive-display.dt', [dt, row, res, update] );
- }
- }
- },
-
-
- /**
- * Initialisation for the details handler
- *
- * @private
- */
- _detailsInit: function ()
- {
- var that = this;
- var dt = this.s.dt;
- var details = this.c.details;
-
- // The inline type always uses the first child as the target
- if ( details.type === 'inline' ) {
- details.target = 'td.dtr-control, th.dtr-control';
- }
-
- // Keyboard accessibility
- dt.on( 'draw.dtr', function () {
- that._tabIndexes();
- } );
- that._tabIndexes(); // Initial draw has already happened
-
- $( dt.table().body() ).on( 'keyup.dtr', 'td, th', function (e) {
- if ( e.keyCode === 13 && $(this).data('dtr-keyboard') ) {
- $(this).click();
- }
- } );
-
- // type.target can be a string jQuery selector or a column index
- var target = details.target;
- var selector = typeof target === 'string' ? target : 'td, th';
-
- if ( target !== undefined || target !== null ) {
- // Click handler to show / hide the details rows when they are available
- $( dt.table().body() )
- .on( 'click.dtr mousedown.dtr mouseup.dtr', selector, function (e) {
- // If the table is not collapsed (i.e. there is no hidden columns)
- // then take no action
- if ( ! $(dt.table().node()).hasClass('collapsed' ) ) {
- return;
- }
-
- // Check that the row is actually a DataTable's controlled node
- if ( $.inArray( $(this).closest('tr').get(0), dt.rows().nodes().toArray() ) === -1 ) {
- return;
- }
-
- // For column index, we determine if we should act or not in the
- // handler - otherwise it is already okay
- if ( typeof target === 'number' ) {
- var targetIdx = target < 0 ?
- dt.columns().eq(0).length + target :
- target;
-
- if ( dt.cell( this ).index().column !== targetIdx ) {
- return;
- }
- }
-
- // $().closest() includes itself in its check
- var row = dt.row( $(this).closest('tr') );
-
- // Check event type to do an action
- if ( e.type === 'click' ) {
- // The renderer is given as a function so the caller can execute it
- // only when they need (i.e. if hiding there is no point is running
- // the renderer)
- that._detailsDisplay( row, false );
- }
- else if ( e.type === 'mousedown' ) {
- // For mouse users, prevent the focus ring from showing
- $(this).css('outline', 'none');
- }
- else if ( e.type === 'mouseup' ) {
- // And then re-allow at the end of the click
- $(this).trigger('blur').css('outline', '');
- }
- } );
- }
- },
-
-
- /**
- * Get the details to pass to a renderer for a row
- * @param {int} rowIdx Row index
- * @private
- */
- _detailsObj: function ( rowIdx )
- {
- var that = this;
- var dt = this.s.dt;
-
- return $.map( this.s.columns, function( col, i ) {
- // Never and control columns should not be passed to the renderer
- if ( col.never || col.control ) {
- return;
- }
-
- var dtCol = dt.settings()[0].aoColumns[ i ];
-
- return {
- className: dtCol.sClass,
- columnIndex: i,
- data: dt.cell( rowIdx, i ).render( that.c.orthogonal ),
- hidden: dt.column( i ).visible() && !that.s.current[ i ],
- rowIndex: rowIdx,
- title: dtCol.sTitle !== null ?
- dtCol.sTitle :
- $(dt.column(i).header()).text()
- };
- } );
- },
-
-
- /**
- * Find a breakpoint object from a name
- *
- * @param {string} name Breakpoint name to find
- * @return {object} Breakpoint description object
- * @private
- */
- _find: function ( name )
- {
- var breakpoints = this.c.breakpoints;
-
- for ( var i=0, ien=breakpoints.length ; i<ien ; i++ ) {
- if ( breakpoints[i].name === name ) {
- return breakpoints[i];
- }
- }
- },
-
-
- /**
- * Re-create the contents of the child rows as the display has changed in
- * some way.
- *
- * @private
- */
- _redrawChildren: function ()
- {
- var that = this;
- var dt = this.s.dt;
-
- dt.rows( {page: 'current'} ).iterator( 'row', function ( settings, idx ) {
- var row = dt.row( idx );
-
- that._detailsDisplay( dt.row( idx ), true );
- } );
- },
-
-
- /**
- * Alter the table display for a resized viewport. This involves first
- * determining what breakpoint the window currently is in, getting the
- * column visibilities to apply and then setting them.
- *
- * @param {boolean} forceRedraw Force a redraw
- * @private
- */
- _resize: function (forceRedraw)
- {
- var that = this;
- var dt = this.s.dt;
- var width = $(window).innerWidth();
- var breakpoints = this.c.breakpoints;
- var breakpoint = breakpoints[0].name;
- var columns = this.s.columns;
- var i, ien;
- var oldVis = this.s.current.slice();
-
- // Determine what breakpoint we are currently at
- for ( i=breakpoints.length-1 ; i>=0 ; i-- ) {
- if ( width <= breakpoints[i].width ) {
- breakpoint = breakpoints[i].name;
- break;
- }
- }
-
- // Show the columns for that break point
- var columnsVis = this._columnsVisiblity( breakpoint );
- this.s.current = columnsVis;
-
- // Set the class before the column visibility is changed so event
- // listeners know what the state is. Need to determine if there are
- // any columns that are not visible but can be shown
- var collapsedClass = false;
-
- for ( i=0, ien=columns.length ; i<ien ; i++ ) {
- if ( columnsVis[i] === false && ! columns[i].never && ! columns[i].control && ! dt.column(i).visible() === false ) {
- collapsedClass = true;
- break;
- }
- }
-
- $( dt.table().node() ).toggleClass( 'collapsed', collapsedClass );
-
- var changed = false;
- var visible = 0;
-
- dt.columns().eq(0).each( function ( colIdx, i ) {
- if ( columnsVis[i] === true ) {
- visible++;
- }
-
- if ( forceRedraw || columnsVis[i] !== oldVis[i] ) {
- changed = true;
- that._setColumnVis( colIdx, columnsVis[i] );
- }
- } );
-
- if ( changed ) {
- this._redrawChildren();
-
- // Inform listeners of the change
- $(dt.table().node()).trigger( 'responsive-resize.dt', [dt, this.s.current] );
-
- // If no records, update the "No records" display element
- if ( dt.page.info().recordsDisplay === 0 ) {
- $('td', dt.table().body()).eq(0).attr('colspan', visible);
- }
- }
-
- that._controlClass();
- },
-
-
- /**
- * Determine the width of each column in the table so the auto column hiding
- * has that information to work with. This method is never going to be 100%
- * perfect since column widths can change slightly per page, but without
- * seriously compromising performance this is quite effective.
- *
- * @private
- */
- _resizeAuto: function ()
- {
- var dt = this.s.dt;
- var columns = this.s.columns;
-
- // Are we allowed to do auto sizing?
- if ( ! this.c.auto ) {
- return;
- }
-
- // Are there any columns that actually need auto-sizing, or do they all
- // have classes defined
- if ( $.inArray( true, $.map( columns, function (c) { return c.auto; } ) ) === -1 ) {
- return;
- }
-
- // Need to restore all children. They will be reinstated by a re-render
- if ( ! $.isEmptyObject( _childNodeStore ) ) {
- $.each( _childNodeStore, function ( key ) {
- var idx = key.split('-');
-
- _childNodesRestore( dt, idx[0]*1, idx[1]*1 );
- } );
- }
-
- // Clone the table with the current data in it
- var tableWidth = dt.table().node().offsetWidth;
- var columnWidths = dt.columns;
- var clonedTable = dt.table().node().cloneNode( false );
- var clonedHeader = $( dt.table().header().cloneNode( false ) ).appendTo( clonedTable );
- var clonedBody = $( dt.table().body() ).clone( false, false ).empty().appendTo( clonedTable ); // use jQuery because of IE8
-
- clonedTable.style.width = 'auto';
-
- // Header
- var headerCells = dt.columns()
- .header()
- .filter( function (idx) {
- return dt.column(idx).visible();
- } )
- .to$()
- .clone( false )
- .css( 'display', 'table-cell' )
- .css( 'width', 'auto' )
- .css( 'min-width', 0 );
-
- // Body rows - we don't need to take account of DataTables' column
- // visibility since we implement our own here (hence the `display` set)
- $(clonedBody)
- .append( $(dt.rows( { page: 'current' } ).nodes()).clone( false ) )
- .find( 'th, td' ).css( 'display', '' );
-
- // Footer
- var footer = dt.table().footer();
- if ( footer ) {
- var clonedFooter = $( footer.cloneNode( false ) ).appendTo( clonedTable );
- var footerCells = dt.columns()
- .footer()
- .filter( function (idx) {
- return dt.column(idx).visible();
- } )
- .to$()
- .clone( false )
- .css( 'display', 'table-cell' );
-
- $('<tr/>')
- .append( footerCells )
- .appendTo( clonedFooter );
- }
-
- $('<tr/>')
- .append( headerCells )
- .appendTo( clonedHeader );
-
- // In the inline case extra padding is applied to the first column to
- // give space for the show / hide icon. We need to use this in the
- // calculation
- if ( this.c.details.type === 'inline' ) {
- $(clonedTable).addClass( 'dtr-inline collapsed' );
- }
-
- // It is unsafe to insert elements with the same name into the DOM
- // multiple times. For example, cloning and inserting a checked radio
- // clears the chcecked state of the original radio.
- $( clonedTable ).find( '[name]' ).removeAttr( 'name' );
-
- // A position absolute table would take the table out of the flow of
- // our container element, bypassing the height and width (Scroller)
- $( clonedTable ).css( 'position', 'relative' )
-
- var inserted = $('<div/>')
- .css( {
- width: 1,
- height: 1,
- overflow: 'hidden',
- clear: 'both'
- } )
- .append( clonedTable );
-
- inserted.insertBefore( dt.table().node() );
-
- // The cloned header now contains the smallest that each column can be
- headerCells.each( function (i) {
- var idx = dt.column.index( 'fromVisible', i );
- columns[ idx ].minWidth = this.offsetWidth || 0;
- } );
-
- inserted.remove();
- },
-
- /**
- * Get the state of the current hidden columns - controlled by Responsive only
- */
- _responsiveOnlyHidden: function ()
- {
- var dt = this.s.dt;
-
- return $.map( this.s.current, function (v, i) {
- // If the column is hidden by DataTables then it can't be hidden by
- // Responsive!
- if ( dt.column(i).visible() === false ) {
- return true;
- }
- return v;
- } );
- },
-
- /**
- * Set a column's visibility.
- *
- * We don't use DataTables' column visibility controls in order to ensure
- * that column visibility can Responsive can no-exist. Since only IE8+ is
- * supported (and all evergreen browsers of course) the control of the
- * display attribute works well.
- *
- * @param {integer} col Column index
- * @param {boolean} showHide Show or hide (true or false)
- * @private
- */
- _setColumnVis: function ( col, showHide )
- {
- var dt = this.s.dt;
- var display = showHide ? '' : 'none'; // empty string will remove the attr
-
- $( dt.column( col ).header() ).css( 'display', display );
- $( dt.column( col ).footer() ).css( 'display', display );
- dt.column( col ).nodes().to$().css( 'display', display );
-
- // If the are child nodes stored, we might need to reinsert them
- if ( ! $.isEmptyObject( _childNodeStore ) ) {
- dt.cells( null, col ).indexes().each( function (idx) {
- _childNodesRestore( dt, idx.row, idx.column );
- } );
- }
- },
-
-
- /**
- * Update the cell tab indexes for keyboard accessibility. This is called on
- * every table draw - that is potentially inefficient, but also the least
- * complex option given that column visibility can change on the fly. Its a
- * shame user-focus was removed from CSS 3 UI, as it would have solved this
- * issue with a single CSS statement.
- *
- * @private
- */
- _tabIndexes: function ()
- {
- var dt = this.s.dt;
- var cells = dt.cells( { page: 'current' } ).nodes().to$();
- var ctx = dt.settings()[0];
- var target = this.c.details.target;
-
- cells.filter( '[data-dtr-keyboard]' ).removeData( '[data-dtr-keyboard]' );
-
- if ( typeof target === 'number' ) {
- dt.cells( null, target, { page: 'current' } ).nodes().to$()
- .attr( 'tabIndex', ctx.iTabIndex )
- .data( 'dtr-keyboard', 1 );
- }
- else {
- // This is a bit of a hack - we need to limit the selected nodes to just
- // those of this table
- if ( target === 'td:first-child, th:first-child' ) {
- target = '>td:first-child, >th:first-child';
- }
-
- $( target, dt.rows( { page: 'current' } ).nodes() )
- .attr( 'tabIndex', ctx.iTabIndex )
- .data( 'dtr-keyboard', 1 );
- }
- }
- } );
-
-
- /**
- * List of default breakpoints. Each item in the array is an object with two
- * properties:
- *
- * * `name` - the breakpoint name.
- * * `width` - the breakpoint width
- *
- * @name Responsive.breakpoints
- * @static
- */
- Responsive.breakpoints = [
- { name: 'desktop', width: Infinity },
- { name: 'tablet-l', width: 1024 },
- { name: 'tablet-p', width: 768 },
- { name: 'mobile-l', width: 480 },
- { name: 'mobile-p', width: 320 }
- ];
-
-
- /**
- * Display methods - functions which define how the hidden data should be shown
- * in the table.
- *
- * @namespace
- * @name Responsive.defaults
- * @static
- */
- Responsive.display = {
- childRow: function ( row, update, render ) {
- if ( update ) {
- if ( $(row.node()).hasClass('parent') ) {
- row.child( render(), 'child' ).show();
-
- return true;
- }
- }
- else {
- if ( ! row.child.isShown() ) {
- row.child( render(), 'child' ).show();
- $( row.node() ).addClass( 'parent' );
-
- return true;
- }
- else {
- row.child( false );
- $( row.node() ).removeClass( 'parent' );
-
- return false;
- }
- }
- },
-
- childRowImmediate: function ( row, update, render ) {
- if ( (! update && row.child.isShown()) || ! row.responsive.hasHidden() ) {
- // User interaction and the row is show, or nothing to show
- row.child( false );
- $( row.node() ).removeClass( 'parent' );
-
- return false;
- }
- else {
- // Display
- row.child( render(), 'child' ).show();
- $( row.node() ).addClass( 'parent' );
-
- return true;
- }
- },
-
- // This is a wrapper so the modal options for Bootstrap and jQuery UI can
- // have options passed into them. This specific one doesn't need to be a
- // function but it is for consistency in the `modal` name
- modal: function ( options ) {
- return function ( row, update, render ) {
- if ( ! update ) {
- // Show a modal
- var close = function () {
- modal.remove(); // will tidy events for us
- $(document).off( 'keypress.dtr' );
- };
-
- var modal = $('<div class="dtr-modal"/>')
- .append( $('<div class="dtr-modal-display"/>')
- .append( $('<div class="dtr-modal-content"/>')
- .append( render() )
- )
- .append( $('<div class="dtr-modal-close">×</div>' )
- .click( function () {
- close();
- } )
- )
- )
- .append( $('<div class="dtr-modal-background"/>')
- .click( function () {
- close();
- } )
- )
- .appendTo( 'body' );
-
- $(document).on( 'keyup.dtr', function (e) {
- if ( e.keyCode === 27 ) {
- e.stopPropagation();
-
- close();
- }
- } );
- }
- else {
- $('div.dtr-modal-content')
- .empty()
- .append( render() );
- }
-
- if ( options && options.header ) {
- $('div.dtr-modal-content').prepend(
- '<h2>'+options.header( row )+'</h2>'
- );
- }
- };
- }
- };
-
-
- var _childNodeStore = {};
-
- function _childNodes( dt, row, col ) {
- var name = row+'-'+col;
-
- if ( _childNodeStore[ name ] ) {
- return _childNodeStore[ name ];
- }
-
- // https://jsperf.com/childnodes-array-slice-vs-loop
- var nodes = [];
- var children = dt.cell( row, col ).node().childNodes;
- for ( var i=0, ien=children.length ; i<ien ; i++ ) {
- nodes.push( children[i] );
- }
-
- _childNodeStore[ name ] = nodes;
-
- return nodes;
- }
-
- function _childNodesRestore( dt, row, col ) {
- var name = row+'-'+col;
-
- if ( ! _childNodeStore[ name ] ) {
- return;
- }
-
- var node = dt.cell( row, col ).node();
- var store = _childNodeStore[ name ];
- var parent = store[0].parentNode;
- var parentChildren = parent.childNodes;
- var a = [];
-
- for ( var i=0, ien=parentChildren.length ; i<ien ; i++ ) {
- a.push( parentChildren[i] );
- }
-
- for ( var j=0, jen=a.length ; j<jen ; j++ ) {
- node.appendChild( a[j] );
- }
-
- _childNodeStore[ name ] = undefined;
- }
-
-
- /**
- * Display methods - functions which define how the hidden data should be shown
- * in the table.
- *
- * @namespace
- * @name Responsive.defaults
- * @static
- */
- Responsive.renderer = {
- listHiddenNodes: function () {
- return function ( api, rowIdx, columns ) {
- var ul = $('<ul data-dtr-index="'+rowIdx+'" class="dtr-details"/>');
- var found = false;
-
- var data = $.each( columns, function ( i, col ) {
- if ( col.hidden ) {
- var klass = col.className ?
- 'class="'+ col.className +'"' :
- '';
-
- $(
- '<li '+klass+' data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
- '<span class="dtr-title">'+
- col.title+
- '</span> '+
- '</li>'
- )
- .append( $('<span class="dtr-data"/>').append( _childNodes( api, col.rowIndex, col.columnIndex ) ) )// api.cell( col.rowIndex, col.columnIndex ).node().childNodes ) )
- .appendTo( ul );
-
- found = true;
- }
- } );
-
- return found ?
- ul :
- false;
- };
- },
-
- listHidden: function () {
- return function ( api, rowIdx, columns ) {
- var data = $.map( columns, function ( col ) {
- var klass = col.className ?
- 'class="'+ col.className +'"' :
- '';
-
- return col.hidden ?
- '<li '+klass+' data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
- '<span class="dtr-title">'+
- col.title+
- '</span> '+
- '<span class="dtr-data">'+
- col.data+
- '</span>'+
- '</li>' :
- '';
- } ).join('');
-
- return data ?
- $('<ul data-dtr-index="'+rowIdx+'" class="dtr-details"/>').append( data ) :
- false;
- }
- },
-
- tableAll: function ( options ) {
- options = $.extend( {
- tableClass: ''
- }, options );
-
- return function ( api, rowIdx, columns ) {
- var data = $.map( columns, function ( col ) {
- var klass = col.className ?
- 'class="'+ col.className +'"' :
- '';
-
- return '<tr '+klass+' data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
- '<td>'+col.title+':'+'</td> '+
- '<td>'+col.data+'</td>'+
- '</tr>';
- } ).join('');
-
- return $('<table class="'+options.tableClass+' dtr-details" width="100%"/>').append( data );
- }
- }
- };
-
- /**
- * Responsive default settings for initialisation
- *
- * @namespace
- * @name Responsive.defaults
- * @static
- */
- Responsive.defaults = {
- /**
- * List of breakpoints for the instance. Note that this means that each
- * instance can have its own breakpoints. Additionally, the breakpoints
- * cannot be changed once an instance has been creased.
- *
- * @type {Array}
- * @default Takes the value of `Responsive.breakpoints`
- */
- breakpoints: Responsive.breakpoints,
-
- /**
- * Enable / disable auto hiding calculations. It can help to increase
- * performance slightly if you disable this option, but all columns would
- * need to have breakpoint classes assigned to them
- *
- * @type {Boolean}
- * @default `true`
- */
- auto: true,
-
- /**
- * Details control. If given as a string value, the `type` property of the
- * default object is set to that value, and the defaults used for the rest
- * of the object - this is for ease of implementation.
- *
- * The object consists of the following properties:
- *
- * * `display` - A function that is used to show and hide the hidden details
- * * `renderer` - function that is called for display of the child row data.
- * The default function will show the data from the hidden columns
- * * `target` - Used as the selector for what objects to attach the child
- * open / close to
- * * `type` - `false` to disable the details display, `inline` or `column`
- * for the two control types
- *
- * @type {Object|string}
- */
- details: {
- display: Responsive.display.childRow,
-
- renderer: Responsive.renderer.listHidden(),
-
- target: 0,
-
- type: 'inline'
- },
-
- /**
- * Orthogonal data request option. This is used to define the data type
- * requested when Responsive gets the data to show in the child row.
- *
- * @type {String}
- */
- orthogonal: 'display'
- };
-
-
- /*
- * API
- */
- var Api = $.fn.dataTable.Api;
-
- // Doesn't do anything - work around for a bug in DT... Not documented
- Api.register( 'responsive()', function () {
- return this;
- } );
-
- Api.register( 'responsive.index()', function ( li ) {
- li = $(li);
-
- return {
- column: li.data('dtr-index'),
- row: li.parent().data('dtr-index')
- };
- } );
-
- Api.register( 'responsive.rebuild()', function () {
- return this.iterator( 'table', function ( ctx ) {
- if ( ctx._responsive ) {
- ctx._responsive._classLogic();
- }
- } );
- } );
-
- Api.register( 'responsive.recalc()', function () {
- return this.iterator( 'table', function ( ctx ) {
- if ( ctx._responsive ) {
- ctx._responsive._resizeAuto();
- ctx._responsive._resize();
- }
- } );
- } );
-
- Api.register( 'responsive.hasHidden()', function () {
- var ctx = this.context[0];
-
- return ctx._responsive ?
- $.inArray( false, ctx._responsive._responsiveOnlyHidden() ) !== -1 :
- false;
- } );
-
- Api.registerPlural( 'columns().responsiveHidden()', 'column().responsiveHidden()', function () {
- return this.iterator( 'column', function ( settings, column ) {
- return settings._responsive ?
- settings._responsive._responsiveOnlyHidden()[ column ] :
- false;
- }, 1 );
- } );
-
-
- /**
- * Version information
- *
- * @name Responsive.version
- * @static
- */
- Responsive.version = '2.2.9';
-
-
- $.fn.dataTable.Responsive = Responsive;
- $.fn.DataTable.Responsive = Responsive;
-
- // Attach a listener to the document which listens for DataTables initialisation
- // events so we can automatically initialise
- $(document).on( 'preInit.dt.dtr', function (e, settings, json) {
- if ( e.namespace !== 'dt' ) {
- return;
- }
-
- if ( $(settings.nTable).hasClass( 'responsive' ) ||
- $(settings.nTable).hasClass( 'dt-responsive' ) ||
- settings.oInit.responsive ||
- DataTable.defaults.responsive
- ) {
- var init = settings.oInit.responsive;
-
- if ( init !== false ) {
- new Responsive( settings, $.isPlainObject( init ) ? init : {} );
- }
- }
- } );
-
-
- return Responsive;
- }));
|