effective_datatables 3.2.7 → 3.3.0

data/app/assets/javascripts/dataTables/responsive/dataTables.responsive.js

@@ -1,15 +1,15 @@
-/*! Responsive 2.1.0
- * 2014-2016 SpryMedia Ltd - datatables.net/license
+/*! Responsive 2.2.0
+ * 2014-2017 SpryMedia Ltd - datatables.net/license
  */
 
 /**
  * @summary     Responsive
  * @description Responsive tables plug-in for DataTables
- * @version     2.1.0
+ * @version     2.2.0
  * @file        dataTables.responsive.js
  * @author      SpryMedia Ltd (www.sprymedia.co.uk)
  * @contact     www.sprymedia.co.uk/contact
- * @copyright   Copyright 2014-2016 SpryMedia Ltd.
+ * @copyright   Copyright 2014-2017 SpryMedia Ltd.
  *
  * This source file is free software, available under the following license:
  *   MIT license - http://datatables.net/license/mit
@@ -21,30 +21,30 @@
  * 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 );
-  }
+	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;
@@ -96,821 +96,866 @@ var DataTable = $.fn.dataTable;
  *    } );
  */
 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();
+	// 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();
-    });
-
-    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 ( ! dt.row( $(this).closest('tr') ).length ) {
-          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;
-
-    $( selector, dt.rows( { page: 'current' } ).nodes() )
-      .attr( 'tabIndex', ctx.iTabIndex )
-      .data( 'dtr-keyboard', 1 );
-  }
+	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+	 * 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] );
+
+			// If no records, update the "No records" display element
+			if ( dt.page.info().recordsDisplay === 0 ) {
+				//dt.draw(); # effective_datatables - don't draw
+			}
+		}
+	},
+
+
+	/**
+	 * 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
+
+		// 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',
+				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();
+	},
+
+	/**
+	 * 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]' );
+
+		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 );
+	}
 } );
 
 
@@ -925,11 +970,11 @@ $.extend( Responsive.prototype, {
  * @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 }
+	{ name: 'desktop',  width: Infinity },
+	{ name: 'tablet-l', width: 1024 },
+	{ name: 'tablet-p', width: 768 },
+	{ name: 'mobile-l', width: 480 },
+	{ name: 'mobile-p', width: 320 }
 ];
 
 
@@ -942,101 +987,147 @@ Responsive.breakpoints = [
  * @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">&times;</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>'
-        );
-      }
-    };
-  }
+	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">&times;</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.
@@ -1046,43 +1137,70 @@ Responsive.display = {
  * @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+'"/>').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+'" width="100%"/>').append( data );
-    }
-  }
+	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 ) {
+					$(
+						'<li 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 ) {
+				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 );
+		}
+	}
 };
 
 /**
@@ -1093,60 +1211,60 @@ Responsive.renderer = {
  * @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'
+	/**
+	 * 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'
 };
 
 
@@ -1157,41 +1275,41 @@ var Api = $.fn.dataTable.Api;
 
 // Doesn't do anything - work around for a bug in DT... Not documented
 Api.register( 'responsive()', function () {
-  return this;
+	return this;
 } );
 
 Api.register( 'responsive.index()', function ( li ) {
-  li = $(li);
+	li = $(li);
 
-  return {
-    column: li.data('dtr-index'),
-    row:    li.parent().data('dtr-index')
-  };
+	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();
-    }
-  } );
+	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();
-    }
-  } );
+	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];
+	var ctx = this.context[0];
 
-  return ctx._responsive ?
-    $.inArray( false, ctx._responsive.s.current ) !== -1 :
-    false;
+	return ctx._responsive ?
+		$.inArray( false, ctx._responsive.s.current ) !== -1 :
+		false;
 } );
 
 
@@ -1201,7 +1319,7 @@ Api.register( 'responsive.hasHidden()', function () {
  * @name Responsive.version
  * @static
  */
-Responsive.version = '2.1.0';
+Responsive.version = '2.2.0';
 
 
 $.fn.dataTable.Responsive = Responsive;
@@ -1210,21 +1328,21 @@ $.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 : {}  );
-    }
-  }
+	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 : {}  );
+		}
+	}
 } );