/*! Responsive 2.1.1 * 2014-2016 SpryMedia Ltd - datatables.net/license */ /** * @summary Responsive * @description Responsive tables plug-in for DataTables * @version 2.1.1 * @file dataTables.responsive.js * @author SpryMedia Ltd (www.sprymedia.co.uk) * @contact www.sprymedia.co.uk/contact * @copyright Copyright 2014-2016 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.3' ) ) { throw 'DataTables Responsive requires DataTables 1.10.3 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).width(); 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).width(); 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' ); // 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 (e, ctx, col, vis) { that._classLogic(); that._resizeAuto(); that._resize(); } ); // 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(); } ); // 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 () { dt.rows( rowIds ).every( function () { that._detailsDisplay( this, false ); } ); } ); }); dt.on( 'init.dtr', function (e, settings, details) { 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 ) { 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] ) { showControl = true; break; } } for ( i=0, ien=columns.length ; i<ien ; i++ ) { if ( columns[i].control ) { display[i] = showControl; } } // 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; if ( priority === undefined ) { var dataPriority = $(column.header()).data('priority'); priority = dataPriority !== undefined ? dataPriority * 1 : 10000; } 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 = $.trim( classNames[k] ); 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' ) { // 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; }, /** * 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:first-child, th:first-child'; } // 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'; // 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).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; } return { title: dt.settings()[0].aoColumns[ i ].sTitle, data: dt.cell( rowIdx, i ).render( that.c.orthogonal ), hidden: dt.column( i ).visible() && !that.s.current[ i ], columnIndex: i, rowIndex: rowIdx }; } ); }, /** * 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. * * @private */ _resize: function () { var that = this; var dt = this.s.dt; var width = $(window).width(); 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 ) { collapsedClass = true; break; } } $( dt.table().node() ).toggleClass( 'collapsed', collapsedClass ); var changed = false; dt.columns().eq(0).each( function ( colIdx, i ) { if ( 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] ); } }, /** * 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; } // 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 // Header var headerCells = dt.columns() .header() .filter( function (idx) { return dt.column(idx).visible(); } ) .to$() .clone( false ) .css( 'display', 'table-cell' ); // 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' ); var inserted = $('<div/>') .css( { width: 1, height: 1, overflow: 'hidden' } ) .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(); }, /** * 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 ); }, /** * 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]' ); var selector = typeof target === 'number' ? ':eq('+target+')' : target; // This is a bit of a hack - we need to limit the selected nodes to just // those of this table if ( selector === 'td:first-child, th:first-child' ) { selector = '>td:first-child, >th:first-child'; } $( selector, 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>' ); } }; } }; /** * Display methods - functions which define how the hidden data should be shown * in the table. * * @namespace * @name Responsive.defaults * @static */ Responsive.renderer = { listHidden: function () { return function ( api, rowIdx, columns ) { var data = $.map( columns, function ( col ) { return col.hidden ? '<li 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 ) { return '<tr 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.s.current ) !== -1 : false; } ); /** * Version information * * @name Responsive.version * @static */ Responsive.version = '2.1.1'; $.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; }));