effective_datatables 4.17.4 → 4.18.0

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

@@ -1,25 +1,7 @@
-/*! Responsive 2.2.2
- * 2014-2018 SpryMedia Ltd - datatables.net/license
+/*! Responsive 2.5.0
+ * © SpryMedia Ltd - datatables.net/license
  */
 
-/**
- * @summary     Responsive
- * @description Responsive tables plug-in for DataTables
- * @version     2.2.2
- * @file        dataTables.responsive.js
- * @author      SpryMedia Ltd (www.sprymedia.co.uk)
- * @contact     www.sprymedia.co.uk/contact
- * @copyright   Copyright 2014-2018 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
@@ -29,17 +11,33 @@
 	}
 	else if ( typeof exports === 'object' ) {
 		// CommonJS
-		module.exports = function (root, $) {
-			if ( ! root ) {
-				root = window;
+		var jq = require('jquery');
+		var cjsRequires = function (root, $) {
+			if ( ! $.fn.dataTable ) {
+				require('datatables.net')(root, $);
 			}
+		};
 
-			if ( ! $ || ! $.fn.dataTable ) {
-				$ = require('datatables.net')(root, $).$;
-			}
+		if (typeof window === 'undefined') {
+			module.exports = function (root, $) {
+				if ( ! root ) {
+					// CommonJS environments without a window global must pass a
+					// root. This will give an error otherwise
+					root = window;
+				}
 
-			return factory( $, root, root.document );
-		};
+				if ( ! $ ) {
+					$ = jq( root );
+				}
+
+				cjsRequires( root, $ );
+				return factory( $, root, root.document );
+			};
+		}
+		else {
+			cjsRequires( window, jq );
+			module.exports = factory( jq, window, window.document );
+		}
 	}
 	else {
 		// Browser
@@ -50,6 +48,24 @@
 var DataTable = $.fn.dataTable;
 
 
+
+/**
+ * @summary     Responsive
+ * @description Responsive tables plug-in for DataTables
+ * @version     2.5.0
+ * @author      SpryMedia Ltd
+ * @copyright   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
+ */
+
 /**
  * Responsive is a plug-in for the DataTables library that makes use of
  * DataTables' ability to change the visibility of columns, changing the
@@ -95,41 +111,42 @@ var DataTable = $.fn.dataTable;
  *      } );
  *    } );
  */
-var Responsive = function ( settings, opts ) {
+var Responsive = function (settings, opts) {
 	// Sanity check that we are using DataTables 1.10 or newer
-	if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.10.10' ) ) {
+	if (!DataTable.versionCheck || !DataTable.versionCheck('1.10.10')) {
 		throw 'DataTables Responsive requires DataTables 1.10.10 or newer';
 	}
 
 	this.s = {
-		dt: new DataTable.Api( settings ),
+		childNodeStore: {},
 		columns: [],
-		current: []
+		current: [],
+		dt: new DataTable.Api(settings)
 	};
 
 	// Check if responsive has already been initialised on this table
-	if ( this.s.dt.settings()[0].responsive ) {
+	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' ) {
+	if (opts && typeof opts.details === 'string') {
 		opts.details = { type: opts.details };
 	}
-	else if ( opts && opts.details === false ) {
+	else if (opts && opts.details === false) {
 		opts.details = { type: false };
 	}
-	else if ( opts && opts.details === true ) {
+	else if (opts && opts.details === true) {
 		opts.details = { type: 'inline' };
 	}
 
-	this.c = $.extend( true, {}, Responsive.defaults, DataTable.defaults.responsive, opts );
+	this.c = $.extend(true, {}, Responsive.defaults, DataTable.defaults.responsive, opts);
 	settings.responsive = this;
 	this._constructor();
 };
 
-$.extend( Responsive.prototype, {
+$.extend(Responsive.prototype, {
 	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 	 * Constructor
 	 */
@@ -139,63 +156,69 @@ $.extend( Responsive.prototype, {
 	 *
 	 * @private
 	 */
-	_constructor: function ()
-	{
+	_constructor: function () {
 		var that = this;
 		var dt = this.s.dt;
 		var dtPrivateSettings = dt.settings()[0];
-		var oldWindowWidth = $(window).width();
+		var oldWindowWidth = $(window).innerWidth();
 
 		dt.settings()[0]._responsive = this;
 
 		// Use DataTables' throttle function to avoid processor thrashing on
 		// resize
-		$(window).on( 'resize.dtr orientationchange.dtr', DataTable.util.throttle( function () {
-			// iOS has a bug whereby resize can fire when only scrolling
-			// See: http://stackoverflow.com/questions/8898412
-			var width = $(window).width();
-
-			if ( width !== oldWindowWidth ) {
-				that._resize();
-				oldWindowWidth = width;
-			}
-		} ) );
+		$(window).on(
+			'resize.dtr orientationchange.dtr',
+			DataTable.util.throttle(function () {
+				// iOS has a bug whereby resize can fire when only scrolling
+				// See: http://stackoverflow.com/questions/8898412
+				var width = $(window).innerWidth();
+
+				if (width !== oldWindowWidth) {
+					that._resize();
+					oldWindowWidth = width;
+				}
+			})
+		);
 
 		// DataTables doesn't currently trigger an event when a row is added, so
 		// we need to hook into its private API to enforce the hidden rows when
 		// new data is added
-		dtPrivateSettings.oApi._fnCallbackReg( dtPrivateSettings, 'aoRowCreatedCallback', function (tr, data, idx) {
-			if ( $.inArray( false, that.s.current ) !== -1 ) {
-				$('>td, >th', tr).each( function ( i ) {
-					var idx = dt.column.index( 'toData', i );
-
-					if ( that.s.current[idx] === false ) {
-						$(this).css('display', 'none');
-					}
-				} );
+		dtPrivateSettings.oApi._fnCallbackReg(
+			dtPrivateSettings,
+			'aoRowCreatedCallback',
+			function (tr, data, idx) {
+				if ($.inArray(false, that.s.current) !== -1) {
+					$('>td, >th', tr).each(function (i) {
+						var idx = dt.column.index('toData', i);
+
+						if (that.s.current[idx] === false) {
+							$(this).css('display', 'none');
+						}
+					});
+				}
 			}
-		} );
+		);
 
 		// Destroy event handler
-		dt.on( 'destroy.dtr', function () {
-			dt.off( '.dtr' );
-			$( dt.table().body() ).off( '.dtr' );
-			$(window).off( 'resize.dtr orientationchange.dtr' );
+		dt.on('destroy.dtr', function () {
+			dt.off('.dtr');
+			$(dt.table().body()).off('.dtr');
+			$(window).off('resize.dtr orientationchange.dtr');
+			dt.cells('.dtr-control').nodes().to$().removeClass('dtr-control');
 
 			// Restore the columns that we've hidden
-			$.each( that.s.current, function ( i, val ) {
-				if ( val === false ) {
-					that._setColumnVis( i, true );
+			$.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.c.breakpoints.sort(function (a, b) {
+			return a.width < b.width ? 1 : a.width > b.width ? -1 : 0;
+		});
 
 		this._classLogic();
 		this._resizeAuto();
@@ -203,90 +226,165 @@ $.extend( Responsive.prototype, {
 		// Details handler
 		var details = this.c.details;
 
-		if ( details.type !== false ) {
+		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 () {
+			dt.on('column-visibility.dtr', function () {
 				// Use a small debounce to allow multiple columns to be set together
-				if ( that._timer ) {
-					clearTimeout( that._timer );
+				if (that._timer) {
+					clearTimeout(that._timer);
 				}
 
-				that._timer = setTimeout( function () {
+				that._timer = setTimeout(function () {
 					that._timer = null;
 
 					that._classLogic();
 					that._resizeAuto();
-					that._resize();
+					that._resize(true);
 
 					that._redrawChildren();
-				}, 100 );
-			} );
+				}, 100);
+			});
 
 			// Redraw the details box on each draw which will happen if the data
 			// has changed. This is used until DataTables implements a native
 			// `updated` event for rows
-			dt.on( 'draw.dtr', function () {
+			dt.on('draw.dtr', function () {
 				that._redrawChildren();
-			} );
+			});
 
-			$(dt.table().node()).addClass( 'dtr-'+details.type );
+			$(dt.table().node()).addClass('dtr-' + details.type);
 		}
 
-		dt.on( 'column-reorder.dtr', function (e, settings, details) {
+		dt.on('column-reorder.dtr', function (e, settings, details) {
 			that._classLogic();
 			that._resizeAuto();
-			that._resize();
-		} );
+			that._resize(true);
+		});
 
 		// Change in column sizes means we need to calc
-		dt.on( 'column-sizing.dtr', function () {
+		dt.on('column-sizing.dtr', function () {
 			that._resizeAuto();
 			that._resize();
 		});
 
+		// DT2 let's us tell it if we are hiding columns
+		dt.on('column-calc.dt', function (e, d) {
+			var curr = that.s.current;
+
+			for (var i = 0; i < curr.length; i++) {
+				var idx = d.visible.indexOf(i);
+
+				if (curr[i] === false && idx >= 0) {
+					d.visible.splice(idx, 1);
+				}
+			}
+		});
+
 		// On Ajax reload we want to reopen any child rows which are displayed
 		// by responsive
-		dt.on( 'preXhr.dtr', function () {
+		dt.on('preXhr.dtr', function () {
 			var rowIds = [];
-			dt.rows().every( function () {
-				if ( this.child.isShown() ) {
-					rowIds.push( this.id(true) );
+			dt.rows().every(function () {
+				if (this.child.isShown()) {
+					rowIds.push(this.id(true));
 				}
-			} );
+			});
 
-			dt.one( 'draw.dtr', function () {
+			dt.one('draw.dtr', function () {
 				that._resizeAuto();
 				that._resize();
 
-				dt.rows( rowIds ).every( function () {
-					that._detailsDisplay( this, false );
-				} );
-			} );
+				dt.rows(rowIds).every(function () {
+					that._detailsDisplay(this, false);
+				});
+			});
 		});
 
-		dt.on( 'init.dtr', function (e, settings, details) {
+		dt.on('draw.dtr', function () {
+			that._controlClass();
+		}).on('init.dtr', function (e, settings, details) {
+			if (e.namespace !== 'dt') {
+				return;
+			}
+
 			that._resizeAuto();
 			that._resize();
 
 			// If columns were hidden, then DataTables needs to adjust the
 			// column sizing
-			if ( $.inArray( false, that.s.current ) ) {
+			if ($.inArray(false, that.s.current)) {
 				dt.columns.adjust();
 			}
-		} );
+		});
 
 		// First pass - draw the table for the current viewport size
 		this._resize();
 	},
 
-
 	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 	 * Private methods
 	 */
 
+	/**
+	 * Get and store nodes from a cell - use for node moving renderers
+	 *
+	 * @param {*} dt DT instance
+	 * @param {*} row Row index
+	 * @param {*} col Column index
+	 */
+	_childNodes: function (dt, row, col) {
+		var name = row + '-' + col;
+
+		if (this.s.childNodeStore[name]) {
+			return this.s.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]);
+		}
+
+		this.s.childNodeStore[name] = nodes;
+
+		return nodes;
+	},
+
+	/**
+	 * Restore nodes from the cache to a table cell
+	 *
+	 * @param {*} dt DT instance
+	 * @param {*} row Row index
+	 * @param {*} col Column index
+	 */
+	_childNodesRestore: function (dt, row, col) {
+		var name = row + '-' + col;
+
+		if (!this.s.childNodeStore[name]) {
+			return;
+		}
+
+		var node = dt.cell(row, col).node();
+		var store = this.s.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]);
+		}
+
+		this.s.childNodeStore[name] = undefined;
+	},
+
 	/**
 	 * Calculate the visibility for the columns in a table for a given
 	 * breakpoint. The result is pre-determined based on the class logic if
@@ -299,8 +397,7 @@ $.extend( Responsive.prototype, {
 	 *   column.
 	 *  @private
 	 */
-	_columnsVisiblity: function ( breakpoint )
-	{
+	_columnsVisiblity: function (breakpoint) {
 		var dt = this.s.dt;
 		var columns = this.s.columns;
 		var i, ien;
@@ -309,38 +406,38 @@ $.extend( Responsive.prototype, {
 		// 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 ) {
+			.map(function (col, idx) {
 				return {
 					columnIdx: idx,
 					priority: col.priority
 				};
-			} )
-			.sort( function ( a, b ) {
-				if ( a.priority !== b.priority ) {
+			})
+			.sort(function (a, b) {
+				if (a.priority !== b.priority) {
 					return a.priority - b.priority;
 				}
 				return a.columnIdx - b.columnIdx;
-			} );
+			});
 
 		// Class logic - determine which columns are in this breakpoint based
 		// on the classes. If no class control (i.e. `auto`) then `-` is used
 		// to indicate this to the rest of the function
-		var display = $.map( columns, function ( col, i ) {
-			if ( dt.column(i).visible() === false ) {
+		var display = $.map(columns, function (col, i) {
+			if (dt.column(i).visible() === false) {
 				return 'not-visible';
 			}
-			return col.auto && col.minWidth === null ?
-				false :
-				col.auto === true ?
-					'-' :
-					$.inArray( breakpoint, col.includeIn ) !== -1;
-		} );
+			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 ) {
+		for (i = 0, ien = display.length; i < ien; i++) {
+			if (display[i] === true) {
 				requiredWidth += columns[i].minWidth;
 			}
 		}
@@ -360,8 +457,8 @@ $.extend( Responsive.prototype, {
 		// 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 ) {
+		for (i = 0, ien = display.length; i < ien; i++) {
+			if (columns[i].control) {
 				usedWidth -= columns[i].minWidth;
 			}
 		}
@@ -369,14 +466,14 @@ $.extend( Responsive.prototype, {
 		// 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++ ) {
+		for (i = 0, ien = order.length; i < ien; i++) {
 			var colIdx = order[i].columnIdx;
 
-			if ( display[colIdx] === '-' && ! columns[colIdx].control && columns[colIdx].minWidth ) {
+			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 ) {
+				if (empty || usedWidth - columns[colIdx].minWidth < 0) {
 					empty = true;
 					display[colIdx] = false;
 				}
@@ -395,34 +492,33 @@ $.extend( Responsive.prototype, {
 		// first , before the action in the second can be taken
 		var showControl = false;
 
-		for ( i=0, ien=columns.length ; i<ien ; i++ ) {
-			if ( ! columns[i].control && ! columns[i].never && display[i] === false ) {
+		for (i = 0, ien = columns.length; i < ien; i++) {
+			if (!columns[i].control && !columns[i].never && display[i] === false) {
 				showControl = true;
 				break;
 			}
 		}
 
-		for ( i=0, ien=columns.length ; i<ien ; i++ ) {
-			if ( columns[i].control ) {
+		for (i = 0, ien = columns.length; i < ien; i++) {
+			if (columns[i].control) {
 				display[i] = showControl;
 			}
 
 			// Replace not visible string with false from the control column detection above
-			if ( display[i] === 'not-visible' ) {
+			if (display[i] === 'not-visible') {
 				display[i] = false;
 			}
 		}
 
 		// Finally we need to make sure that there is at least one column that
 		// is visible
-		if ( $.inArray( true, display ) === -1 ) {
+		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
@@ -431,76 +527,78 @@ $.extend( Responsive.prototype, {
 	 *
 	 * @private
 	 */
-	_classLogic: function ()
-	{
+	_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;
-			}
+		var columns = dt
+			.columns()
+			.eq(0)
+			.map(function (i) {
+				var column = this.column(i);
+				var className = column.header().className;
+				var priority = dt.settings()[0].aoColumns[i].responsivePriority;
+				var dataPriority = column.header().getAttribute('data-priority');
+
+				if (priority === undefined) {
+					priority =
+						dataPriority === undefined || dataPriority === null
+							? 10000
+							: dataPriority * 1;
+				}
 
-			return {
-				className: className,
-				includeIn: [],
-				auto:      false,
-				control:   false,
-				never:     className.match(/\bnever\b/) ? true : false,
-				priority:  priority
-			};
-		} );
+				return {
+					className: className,
+					includeIn: [],
+					auto: false,
+					control: false,
+					never: className.match(/\b(dtr\-)?never\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;
+		var add = function (colIdx, name) {
+			var includeIn = columns[colIdx].includeIn;
 
-			if ( $.inArray( name, includeIn ) === -1 ) {
-				includeIn.push( name );
+			if ($.inArray(name, includeIn) === -1) {
+				includeIn.push(name);
 			}
 		};
 
-		var column = function ( colIdx, name, operator, matched ) {
+		var column = function (colIdx, name, operator, matched) {
 			var size, i, ien;
 
-			if ( ! operator ) {
-				columns[ colIdx ].includeIn.push( name );
+			if (!operator) {
+				columns[colIdx].includeIn.push(name);
 			}
-			else if ( operator === 'max-' ) {
+			else if (operator === 'max-') {
 				// Add this breakpoint and all smaller
-				size = that._find( name ).width;
+				size = that._find(name).width;
 
-				for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
-					if ( breakpoints[i].width <= size ) {
-						add( colIdx, breakpoints[i].name );
+				for (i = 0, ien = breakpoints.length; i < ien; i++) {
+					if (breakpoints[i].width <= size) {
+						add(colIdx, breakpoints[i].name);
 					}
 				}
 			}
-			else if ( operator === 'min-' ) {
+			else if (operator === 'min-') {
 				// Add this breakpoint and all larger
-				size = that._find( name ).width;
+				size = that._find(name).width;
 
-				for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
-					if ( breakpoints[i].width >= size ) {
-						add( colIdx, breakpoints[i].name );
+				for (i = 0, ien = breakpoints.length; i < ien; i++) {
+					if (breakpoints[i].width >= size) {
+						add(colIdx, breakpoints[i].name);
 					}
 				}
 			}
-			else if ( operator === 'not-' ) {
+			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 );
+				for (i = 0, ien = breakpoints.length; i < ien; i++) {
+					if (breakpoints[i].name.indexOf(matched) === -1) {
+						add(colIdx, breakpoints[i].name);
 					}
 				}
 			}
@@ -508,28 +606,28 @@ $.extend( Responsive.prototype, {
 
 		// Loop over each column and determine if it has a responsive control
 		// class
-		columns.each( function ( col, i ) {
+		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] );
+			for (var k = 0, ken = classNames.length; k < ken; k++) {
+				var className = classNames[k].trim();
 
-				if ( className === 'all' ) {
+				if (className === 'all' || className === 'dtr-all') {
 					// Include in all
 					hasClass = true;
-					col.includeIn = $.map( breakpoints, function (a) {
+					col.includeIn = $.map(breakpoints, function (a) {
 						return a.name;
-					} );
+					});
 					return;
 				}
-				else if ( className === 'none' || col.never ) {
+				else if (className === 'none' || className === 'dtr-none' || col.never) {
 					// Include in none (default) and no auto
 					hasClass = true;
 					return;
 				}
-				else if ( className === 'control' ) {
+				else if (className === 'control' || className === 'dtr-control') {
 					// Special column that is only visible, when one of the other
 					// columns is hidden. This is used for the details control
 					hasClass = true;
@@ -537,36 +635,64 @@ $.extend( Responsive.prototype, {
 					return;
 				}
 
-				$.each( breakpoints, function ( j, breakpoint ) {
+				$.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 );
+					var re = new RegExp(
+						'(min\\-|max\\-|not\\-)?(' + brokenPoint[0] + ')(\\-[_a-zA-Z0-9])?'
+					);
+					var match = className.match(re);
 
-					if ( match ) {
+					if (match) {
 						hasClass = true;
 
-						if ( match[2] === brokenPoint[0] && match[3] === '-'+brokenPoint[1] ) {
+						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] );
+							column(i, breakpoint.name, match[1], match[2] + match[3]);
 						}
-						else if ( match[2] === brokenPoint[0] && ! 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] );
+							column(i, breakpoint.name, match[1], match[2]);
 						}
 					}
-				} );
+				});
 			}
 
 			// If there was no control class, then automatic sizing is used
-			if ( ! hasClass ) {
+			if (!hasClass) {
 				col.auto = true;
 			}
-		} );
+		});
 
 		this.s.columns = columns;
 	},
 
+	/**
+	 * Update the cells to show the correct control class / button
+	 * @private
+	 */
+	_controlClass: function () {
+		if (this.c.details.type === 'inline') {
+			var dt = this.s.dt;
+			var columnsVis = this.s.current;
+			var firstVisible = $.inArray(true, columnsVis);
+
+			// Remove from any cells which shouldn't have it
+			dt.cells(
+				null,
+				function (idx) {
+					return idx !== firstVisible;
+				},
+				{ page: 'current' }
+			)
+				.nodes()
+				.to$()
+				.filter('.dtr-control')
+				.removeClass('dtr-control');
+
+			dt.cells(null, firstVisible, { page: 'current' }).nodes().to$().addClass('dtr-control');
+		}
+	},
 
 	/**
 	 * Show the details for the child row
@@ -575,133 +701,143 @@ $.extend( Responsive.prototype, {
 	 * @param  {boolean}        update Update flag
 	 * @private
 	 */
-	_detailsDisplay: function ( row, update )
-	{
+	_detailsDisplay: function (row, update) {
 		var that = this;
 		var dt = this.s.dt;
 		var details = this.c.details;
+		var event = function (res) {
+			$(row.node()).toggleClass('parent', res !== false);
+			$(dt.table().node()).triggerHandler('responsive-display.dt', [dt, row, res, update]);
+		};
 
-		if ( details && details.type !== false ) {
-			var res = details.display( row, update, function () {
-				return details.renderer(
-					dt, row[0], that._detailsObj(row[0])
-				);
-			} );
+		if (details && details.type !== false) {
+			var renderer =
+				typeof details.renderer === 'string'
+					? Responsive.renderer[details.renderer]()
+					: details.renderer;
+
+			var res = details.display(
+				row,
+				update,
+				function () {
+					return renderer.call(that, dt, row[0], that._detailsObj(row[0]));
+				},
+				function () {
+					event(false);
+				}
+			);
 
-			if ( res === true || res === false ) {
-				$(dt.table().node()).triggerHandler( 'responsive-display.dt', [dt, row, res, update] );
+			if (typeof res === 'boolean') {
+				event(res);
 			}
 		}
 	},
 
-
 	/**
 	 * Initialisation for the details handler
 	 *
 	 * @private
 	 */
-	_detailsInit: function ()
-	{
-		var that    = this;
-		var dt      = this.s.dt;
+	_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';
+		if (details.type === 'inline') {
+			details.target = 'td.dtr-control, th.dtr-control';
 		}
 
 		// Keyboard accessibility
-		dt.on( 'draw.dtr', function () {
+		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') ) {
+		$(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 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 (target !== undefined || target !== null) {
+			// Click handler to show / hide the details rows when they are available
+			$(dt.table().body()).on('click.dtr mousedown.dtr mouseup.dtr', selector, function (e) {
 				// If the table is not collapsed (i.e. there is no hidden columns)
 				// then take no action
-				if ( ! $(dt.table().node()).hasClass('collapsed' ) ) {
+				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 ) {
+				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 (typeof target === 'number') {
+					var targetIdx = target < 0 ? dt.columns().eq(0).length + target : target;
 
-					if ( dt.cell( this ).index().column !== targetIdx ) {
+					if (dt.cell(this).index().column !== targetIdx) {
 						return;
 					}
 				}
 
 				// $().closest() includes itself in its check
-				var row = dt.row( $(this).closest('tr') );
+				var row = dt.row($(this).closest('tr'));
 
 				// Check event type to do an action
-				if ( e.type === 'click' ) {
+				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 );
+					that._detailsDisplay(row, false);
 				}
-				else if ( e.type === 'mousedown' ) {
+				else if (e.type === 'mousedown') {
 					// For mouse users, prevent the focus ring from showing
 					$(this).css('outline', 'none');
 				}
-				else if ( e.type === 'mouseup' ) {
+				else if (e.type === 'mouseup') {
 					// And then re-allow at the end of the click
-					$(this).blur().css('outline', '');
+					$(this).trigger('blur').css('outline', '');
 				}
-			} );
+			});
+		}
 	},
 
-
 	/**
 	 * Get the details to pass to a renderer for a row
 	 * @param  {int} rowIdx Row index
 	 * @private
 	 */
-	_detailsObj: function ( rowIdx )
-	{
+	_detailsObj: function (rowIdx) {
 		var that = this;
 		var dt = this.s.dt;
 
-		return $.map( this.s.columns, function( col, i ) {
+		return $.map(this.s.columns, function (col, i) {
 			// Never and control columns should not be passed to the renderer
-			if ( col.never || col.control ) {
+			if (col.never || col.control) {
 				return;
 			}
 
+			var dtCol = dt.settings()[0].aoColumns[i];
+
 			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 ],
+				className: dtCol.sClass,
 				columnIndex: i,
-				rowIndex:    rowIdx
+				data: dt.cell(rowIdx, i).render(that.c.orthogonal),
+				hidden: dt.column(i).visible() && !that.s.current[i],
+				rowIndex: rowIdx,
+				title: dtCol.sTitle !== null ? dtCol.sTitle : $(dt.column(i).header()).text()
 			};
-		} );
+		});
 	},
 
-
 	/**
 	 * Find a breakpoint object from a name
 	 *
@@ -709,49 +845,43 @@ $.extend( Responsive.prototype, {
 	 * @return {object}      Breakpoint description object
 	 * @private
 	 */
-	_find: function ( name )
-	{
+	_find: function (name) {
 		var breakpoints = this.c.breakpoints;
 
-		for ( var i=0, ien=breakpoints.length ; i<ien ; i++ ) {
-			if ( breakpoints[i].name === name ) {
+		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 ()
-	{
+	_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 );
-		} );
+		dt.rows({ page: 'current' }).iterator('row', function (settings, idx) {
+			that._detailsDisplay(dt.row(idx), true);
+		});
 	},
 
-
 	/**
 	 * Alter the table display for a resized viewport. This involves first
 	 * determining what breakpoint the window currently is in, getting the
 	 * column visibilities to apply and then setting them.
 	 *
+	 * @param  {boolean} forceRedraw Force a redraw
 	 * @private
 	 */
-	_resize: function ()
-	{
+	_resize: function (forceRedraw) {
 		var that = this;
 		var dt = this.s.dt;
-		var width = $(window).width();
+		var width = $(window).innerWidth();
 		var breakpoints = this.c.breakpoints;
 		var breakpoint = breakpoints[0].name;
 		var columns = this.s.columns;
@@ -759,57 +889,68 @@ $.extend( Responsive.prototype, {
 		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 ) {
+		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 );
+		var columnsVis = this._columnsVisiblity(breakpoint);
 		this.s.current = columnsVis;
 
 		// Set the class before the column visibility is changed so event
 		// listeners know what the state is. Need to determine if there are
 		// any columns that are not visible but can be shown
 		var collapsedClass = false;
-		for ( i=0, ien=columns.length ; i<ien ; i++ ) {
-			if ( columnsVis[i] === false && ! columns[i].never && ! columns[i].control && ! dt.column(i).visible() === false ) {
+
+		for (i = 0, ien = columns.length; i < ien; i++) {
+			if (
+				columnsVis[i] === false &&
+				!columns[i].never &&
+				!columns[i].control &&
+				!dt.column(i).visible() === false
+			) {
 				collapsedClass = true;
 				break;
 			}
 		}
 
-		$( dt.table().node() ).toggleClass( 'collapsed', collapsedClass );
+		$(dt.table().node()).toggleClass('collapsed', collapsedClass);
 
 		var changed = false;
 		var visible = 0;
 
-		dt.columns().eq(0).each( function ( colIdx, i ) {
-			if ( columnsVis[i] === true ) {
-				visible++;
-			}
+		dt.columns()
+			.eq(0)
+			.each(function (colIdx, i) {
+				if (columnsVis[i] === true) {
+					visible++;
+				}
 
-			if ( columnsVis[i] !== oldVis[i] ) {
-				changed = true;
-				that._setColumnVis( colIdx, columnsVis[i] );
-			}
-		} );
+				if (forceRedraw || columnsVis[i] !== oldVis[i]) {
+					changed = true;
+					that._setColumnVis(colIdx, columnsVis[i]);
+				}
+			});
 
-		if ( changed ) {
-			this._redrawChildren();
+		// Always need to update the display, regardless of if it has changed or not, so nodes
+		// can be re-inserted for listHiddenNodes
+		this._redrawChildren();
 
+		if (changed) {
 			// Inform listeners of the change
-			$(dt.table().node()).trigger( 'responsive-resize.dt', [dt, this.s.current] );
+			$(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 ) {
+			if (dt.page.info().recordsDisplay === 0) {
 				$('td', dt.table().body()).eq(0).attr('colspan', visible);
 			}
 		}
-	},
 
+		that._controlClass();
+	},
 
 	/**
 	 * Determine the width of each column in the table so the auto column hiding
@@ -819,113 +960,138 @@ $.extend( Responsive.prototype, {
 	 *
 	 * @private
 	 */
-	_resizeAuto: function ()
-	{
+	_resizeAuto: function () {
 		var dt = this.s.dt;
 		var columns = this.s.columns;
+		var that = this;
 
 		// Are we allowed to do auto sizing?
-		if ( ! this.c.auto ) {
+		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 ) {
+		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 ) {
+		if (!$.isEmptyObject(this.s.childNodeStore)) {
+			$.each(this.s.childNodeStore, function (key) {
 				var idx = key.split('-');
 
-				_childNodesRestore( dt, idx[0]*1, idx[1]*1 );
-			} );
+				that._childNodesRestore(dt, idx[0] * 1, idx[1] * 1);
+			});
 		}
 
 		// Clone the table with the current data in it
-		var tableWidth   = dt.table().node().offsetWidth;
+		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
+		var clonedTable = dt.table().node().cloneNode(false);
+		var clonedHeader = $(dt.table().header().cloneNode(false)).appendTo(clonedTable);
+		var clonedBody = $(dt.table().body()).clone(false, false).empty().appendTo(clonedTable); // use jQuery because of IE8
+
+		clonedTable.style.width = 'auto';
 
 		// Header
-		var headerCells = dt.columns()
+		var headerCells = dt
+			.columns()
 			.header()
-			.filter( function (idx) {
+			.filter(function (idx) {
 				return dt.column(idx).visible();
-			} )
+			})
 			.to$()
-			.clone( false )
-			.css( 'display', 'table-cell' )
-			.css( 'min-width', 0 );
+			.clone(false)
+			.css('display', 'table-cell')
+			.css('width', 'auto')
+			.css('min-width', 0);
 
 		// Body rows - we don't need to take account of DataTables' column
 		// visibility since we implement our own here (hence the `display` set)
 		$(clonedBody)
-			.append( $(dt.rows( { page: 'current' } ).nodes()).clone( false ) )
-			.find( 'th, td' ).css( 'display', '' );
+			.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()
+		if (footer) {
+			var clonedFooter = $(footer.cloneNode(false)).appendTo(clonedTable);
+			var footerCells = dt
+				.columns()
 				.footer()
-				.filter( function (idx) {
+				.filter(function (idx) {
 					return dt.column(idx).visible();
-				} )
+				})
 				.to$()
-				.clone( false )
-				.css( 'display', 'table-cell' );
+				.clone(false)
+				.css('display', 'table-cell');
 
-			$('<tr/>')
-				.append( footerCells )
-				.appendTo( clonedFooter );
+			$('<tr/>').append(footerCells).appendTo(clonedFooter);
 		}
 
-		$('<tr/>')
-			.append( headerCells )
-			.appendTo( clonedHeader );
+		$('<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' );
+		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' );
+		$(clonedTable).find('[name]').removeAttr('name');
 
 		// A position absolute table would take the table out of the flow of
 		// our container element, bypassing the height and width (Scroller)
-		$( clonedTable ).css( 'position', 'relative' )
+		$(clonedTable).css('position', 'relative');
 
 		var inserted = $('<div/>')
-			.css( {
+			.css({
 				width: 1,
 				height: 1,
 				overflow: 'hidden',
 				clear: 'both'
-			} )
-			.append( clonedTable );
+			})
+			.append(clonedTable);
 
-		inserted.insertBefore( dt.table().node() );
+		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;
-		} );
+		headerCells.each(function (i) {
+			var idx = dt.column.index('fromVisible', i);
+			columns[idx].minWidth = this.offsetWidth || 0;
+		});
 
 		inserted.remove();
 	},
 
+	/**
+	 * Get the state of the current hidden columns - controlled by Responsive only
+	 */
+	_responsiveOnlyHidden: function () {
+		var dt = this.s.dt;
+
+		return $.map(this.s.current, function (v, i) {
+			// If the column is hidden by DataTables then it can't be hidden by
+			// Responsive!
+			if (dt.column(i).visible() === false) {
+				return true;
+			}
+			return v;
+		});
+	},
+
 	/**
 	 * Set a column's visibility.
 	 *
@@ -938,24 +1104,27 @@ $.extend( Responsive.prototype, {
 	 * @param {boolean} showHide Show or hide (true or false)
 	 * @private
 	 */
-	_setColumnVis: function ( col, showHide )
-	{
+	_setColumnVis: function (col, showHide) {
+		var that = this;
 		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 );
+		$(dt.column(col).header()).css('display', display).toggleClass('dtr-hidden', !showHide);
+
+		$(dt.column(col).footer()).css('display', display).toggleClass('dtr-hidden', !showHide);
+
+		dt.column(col).nodes().to$().css('display', display).toggleClass('dtr-hidden', !showHide);
 
 		// 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 );
-			} );
+		if (!$.isEmptyObject(this.s.childNodeStore)) {
+			dt.cells(null, col)
+				.indexes()
+				.each(function (idx) {
+					that._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
@@ -965,34 +1134,34 @@ $.extend( Responsive.prototype, {
 	 *
 	 * @private
 	 */
-	_tabIndexes: function ()
-	{
+	_tabIndexes: function () {
 		var dt = this.s.dt;
-		var cells = dt.cells( { page: 'current' } ).nodes().to$();
+		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]' );
+		cells.filter('[data-dtr-keyboard]').removeData('[data-dtr-keyboard]');
 
-		if ( typeof target === 'number' ) {
-			dt.cells( null, target, { page: 'current' } ).nodes().to$()
-				.attr( 'tabIndex', ctx.iTabIndex )
-				.data( 'dtr-keyboard', 1 );
+		if (typeof target === 'number') {
+			dt.cells(null, target, { page: 'current' })
+				.nodes()
+				.to$()
+				.attr('tabIndex', ctx.iTabIndex)
+				.data('dtr-keyboard', 1);
 		}
 		else {
 			// This is a bit of a hack - we need to limit the selected nodes to just
 			// those of this table
-			if ( target === 'td:first-child, th:first-child' ) {
+			if (target === 'td:first-child, th:first-child') {
 				target = '>td:first-child, >th:first-child';
 			}
 
-			$( target, dt.rows( { page: 'current' } ).nodes() )
-				.attr( 'tabIndex', ctx.iTabIndex )
-				.data( 'dtr-keyboard', 1 );
+			$(target, dt.rows({ page: 'current' }).nodes())
+				.attr('tabIndex', ctx.iTabIndex)
+				.data('dtr-keyboard', 1);
 		}
 	}
-} );
-
+});
 
 /**
  * List of default breakpoints. Each item in the array is an object with two
@@ -1005,14 +1174,13 @@ $.extend( Responsive.prototype, {
  * @static
  */
 Responsive.breakpoints = [
-	{ name: 'desktop',  width: Infinity },
+	{ 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.
@@ -1022,42 +1190,38 @@ Responsive.breakpoints = [
  * @static
  */
 Responsive.display = {
-	childRow: function ( row, update, render ) {
-		if ( update ) {
-			if ( $(row.node()).hasClass('parent') ) {
-				row.child( render(), 'child' ).show();
+	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' );
+			if (!row.child.isShown()) {
+				row.child(render(), 'child').show();
 
 				return true;
 			}
 			else {
-				row.child( false );
-				$( row.node() ).removeClass( 'parent' );
+				row.child(false);
 
 				return false;
 			}
 		}
 	},
 
-	childRowImmediate: function ( row, update, render ) {
-		if ( (! update && row.child.isShown()) || ! row.responsive.hasHidden() ) {
+	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' );
+			row.child(false);
 
 			return false;
 		}
 		else {
 			// Display
-			row.child( render(), 'child' ).show();
-			$( row.node() ).addClass( 'parent' );
+			row.child(render(), 'child').show();
 
 			return true;
 		}
@@ -1066,103 +1230,70 @@ Responsive.display = {
 	// 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 ) {
+	modal: function (options) {
+		return function (row, update, render, closeCallback) {
+			if (!update) {
 				// Show a modal
 				var close = function () {
 					modal.remove(); // will tidy events for us
-					$(document).off( 'keypress.dtr' );
+					$(document).off('keypress.dtr');
+					$(row.node()).removeClass('parent');
+
+					closeCallback();
 				};
 
 				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-display"/>')
+							.append(
+								$('<div class="dtr-modal-content"/>')
+									.data('dtr-row-idx', row.index())
+									.append(render())
+							)
+							.append(
+								$('<div class="dtr-modal-close">&times;</div>').click(function () {
+									close();
+								})
+							)
 					)
-					.append( $('<div class="dtr-modal-background"/>')
-						.click( function () {
+					.append(
+						$('<div class="dtr-modal-background"/>').click(function () {
 							close();
-						} )
+						})
 					)
-					.appendTo( 'body' );
+					.appendTo('body');
+
+				$(row.node()).addClass('parent');
 
-				$(document).on( 'keyup.dtr', function (e) {
-					if ( e.keyCode === 27 ) {
+				$(document).on('keyup.dtr', function (e) {
+					if (e.keyCode === 27) {
 						e.stopPropagation();
 
 						close();
 					}
-				} );
+				});
 			}
 			else {
-				$('div.dtr-modal-content')
-					.empty()
-					.append( render() );
+				var modal = $('div.dtr-modal-content');
+
+				if (modal.length && row.index() === modal.data('dtr-row-idx')) {
+					modal.empty().append(render());
+				}
+				else {
+					// Modal not shown, nothing to update
+					return null;
+				}
 			}
 
-			if ( options && options.header ) {
-				$('div.dtr-modal-content').prepend(
-					'<h2>'+options.header( row )+'</h2>'
-				);
+			if (options && options.header) {
+				$('div.dtr-modal-content').prepend('<h2>' + options.header(row) + '</h2>');
 			}
+
+			return true;
 		};
 	}
 };
 
-
-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.
@@ -1173,68 +1304,111 @@ function _childNodesRestore( dt, row, col ) {
  */
 Responsive.renderer = {
 	listHiddenNodes: function () {
-		return function ( api, rowIdx, columns ) {
-			var ul = $('<ul data-dtr-index="'+rowIdx+'" class="dtr-details"/>');
+		return function (api, rowIdx, columns) {
+			var that = this;
+			var ul = $('<ul data-dtr-index="' + rowIdx + '" class="dtr-details"/>');
 			var found = false;
 
-			var data = $.each( columns, function ( i, col ) {
-				if ( col.hidden ) {
+			var data = $.each(columns, function (i, col) {
+				if (col.hidden) {
+					var klass = col.className ? 'class="' + col.className + '"' : '';
+
 					$(
-						'<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
-							'<span class="dtr-title">'+
-								col.title+
-							'</span> '+
-						'</li>'
+						'<li ' +
+							klass +
+							' data-dtr-index="' +
+							col.columnIndex +
+							'" data-dt-row="' +
+							col.rowIndex +
+							'" data-dt-column="' +
+							col.columnIndex +
+							'">' +
+							'<span class="dtr-title">' +
+							col.title +
+							'</span> ' +
+							'</li>'
 					)
-						.append( $('<span class="dtr-data"/>').append( _childNodes( api, col.rowIndex, col.columnIndex ) ) )// api.cell( col.rowIndex, col.columnIndex ).node().childNodes ) )
-						.appendTo( ul );
+						.append(
+							$('<span class="dtr-data"/>').append(
+								that._childNodes(api, col.rowIndex, col.columnIndex)
+							)
+						) // api.cell( col.rowIndex, col.columnIndex ).node().childNodes ) )
+						.appendTo(ul);
 
 					found = true;
 				}
-			} );
+			});
 
-			return found ?
-				ul :
-				false;
+			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;
-		}
+		return function (api, rowIdx, columns) {
+			var data = $.map(columns, function (col) {
+				var klass = col.className ? 'class="' + col.className + '"' : '';
+
+				return col.hidden
+					? '<li ' +
+							klass +
+							' data-dtr-index="' +
+							col.columnIndex +
+							'" data-dt-row="' +
+							col.rowIndex +
+							'" data-dt-column="' +
+							col.columnIndex +
+							'">' +
+							'<span class="dtr-title">' +
+							col.title +
+							'</span> ' +
+							'<span class="dtr-data">' +
+							col.data +
+							'</span>' +
+							'</li>'
+					: '';
+			}).join('');
+
+			return data
+				? $('<ul data-dtr-index="' + rowIdx + '" class="dtr-details"/>').append(data)
+				: false;
+		};
 	},
 
-	tableAll: function ( options ) {
-		options = $.extend( {
-			tableClass: ''
-		}, options );
-
-		return function ( api, rowIdx, columns ) {
-			var data = $.map( columns, function ( col ) {
-				return '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
-						'<td>'+col.title+':'+'</td> '+
-						'<td>'+col.data+'</td>'+
-					'</tr>';
-			} ).join('');
+	tableAll: function (options) {
+		options = $.extend(
+			{
+				tableClass: ''
+			},
+			options
+		);
+
+		return function (api, rowIdx, columns) {
+			var data = $.map(columns, function (col) {
+				var klass = col.className ? 'class="' + col.className + '"' : '';
+
+				return (
+					'<tr ' +
+					klass +
+					' data-dt-row="' +
+					col.rowIndex +
+					'" data-dt-column="' +
+					col.columnIndex +
+					'">' +
+					'<td>' +
+					col.title +
+					':' +
+					'</td> ' +
+					'<td>' +
+					col.data +
+					'</td>' +
+					'</tr>'
+				);
+			}).join('');
 
-			return $('<table class="'+options.tableClass+' dtr-details" width="100%"/>').append( data );
-		}
+			return $('<table class="' + options.tableClass + ' dtr-details" width="100%"/>').append(
+				data
+			);
+		};
 	}
 };
 
@@ -1302,59 +1476,61 @@ Responsive.defaults = {
 	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 () {
+Api.register('responsive()', function () {
 	return this;
-} );
+});
 
-Api.register( 'responsive.index()', function ( li ) {
+Api.register('responsive.index()', function (li) {
 	li = $(li);
 
 	return {
 		column: li.data('dtr-index'),
-		row:    li.parent().data('dtr-index')
+		row: li.parent().data('dtr-index')
 	};
-} );
+});
 
-Api.register( 'responsive.rebuild()', function () {
-	return this.iterator( 'table', function ( ctx ) {
-		if ( ctx._responsive ) {
+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 ) {
+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 () {
+Api.register('responsive.hasHidden()', function () {
 	var ctx = this.context[0];
 
-	return ctx._responsive ?
-		$.inArray( false, ctx._responsive.s.current ) !== -1 :
-		false;
-} );
-
-Api.registerPlural( 'columns().responsiveHidden()', 'column().responsiveHidden()', function () {
-	return this.iterator( 'column', function ( settings, column ) {
-		return settings._responsive ?
-			settings._responsive.s.current[ column ] :
-			false;
-	}, 1 );
-} );
-
+	return ctx._responsive
+		? $.inArray(false, ctx._responsive._responsiveOnlyHidden()) !== -1
+		: false;
+});
+
+Api.registerPlural('columns().responsiveHidden()', 'column().responsiveHidden()', function () {
+	return this.iterator(
+		'column',
+		function (settings, column) {
+			return settings._responsive
+				? settings._responsive._responsiveOnlyHidden()[column]
+				: false;
+		},
+		1
+	);
+});
 
 /**
  * Version information
@@ -1362,32 +1538,32 @@ Api.registerPlural( 'columns().responsiveHidden()', 'column().responsiveHidden()
  * @name Responsive.version
  * @static
  */
-Responsive.version = '2.2.2';
-
+Responsive.version = '2.5.0';
 
 $.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' ) {
+$(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
+	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 (init !== false) {
+			new Responsive(settings, $.isPlainObject(init) ? init : {});
 		}
 	}
-} );
+});
 
 
-return Responsive;
+return DataTable;
 }));