oxidized-web 0.14.0 → 0.15.0

data/lib/oxidized/web/public/weblibs/dataTables.js

@@ -1,25 +1,7 @@
-/*! DataTables 2.0.8
+/*! DataTables 2.2.2
  * © SpryMedia Ltd - datatables.net/license
  */
 
-/**
- * @summary     DataTables
- * @description Paginate, search and order HTML tables
- * @version     2.0.8
- * @author      SpryMedia Ltd
- * @contact     www.datatables.net
- * @copyright   SpryMedia Ltd.
- *
- * This source file is free software, available under the following license:
- *   MIT license - https://datatables.net/license
- *
- * 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: https://www.datatables.net
- */
-
 (function( factory ) {
 	"use strict";
 
@@ -104,7 +86,6 @@
 			
 			var i=0, iLen;
 			var sId = this.getAttribute( 'id' );
-			var bInitHandedOff = false;
 			var defaults = DataTable.defaults;
 			var $this = $(this);
 			
@@ -254,6 +235,8 @@
 				"rowId",
 				"caption",
 				"layout",
+				"orderDescReverse",
+				"typeDetect",
 				[ "iCookieDuration", "iStateDuration" ], // backwards compat
 				[ "oSearch", "oPreviousSearch" ],
 				[ "aoSearchCols", "aoPreSearchCols" ],
@@ -300,38 +283,14 @@
 				oSettings._iDisplayStart = oInit.iDisplayStart;
 			}
 			
-			/* Language definitions */
-			var oLanguage = oSettings.oLanguage;
-			$.extend( true, oLanguage, oInit.oLanguage );
-			
-			if ( oLanguage.sUrl )
+			var defer = oInit.iDeferLoading;
+			if ( defer !== null )
 			{
-				/* Get the language definitions from a file - because this Ajax call makes the language
-				 * get async to the remainder of this function we use bInitHandedOff to indicate that
-				 * _fnInitialise will be fired by the returned Ajax handler, rather than the constructor
-				 */
-				$.ajax( {
-					dataType: 'json',
-					url: oLanguage.sUrl,
-					success: function ( json ) {
-						_fnCamelToHungarian( defaults.oLanguage, json );
-						$.extend( true, oLanguage, json, oSettings.oInit.oLanguage );
+				oSettings.deferLoading = true;
 			
-						_fnCallbackFire( oSettings, null, 'i18n', [oSettings], true);
-						_fnInitialise( oSettings );
-					},
-					error: function () {
-						// Error occurred loading language file
-						_fnLog( oSettings, 0, 'i18n file loading error', 21 );
-			
-						// continue on as best we can
-						_fnInitialise( oSettings );
-					}
-				} );
-				bInitHandedOff = true;
-			}
-			else {
-				_fnCallbackFire( oSettings, null, 'i18n', [oSettings]);
+				var tmp = Array.isArray(defer);
+				oSettings._iRecordsDisplay = tmp ? defer[0] : defer;
+				oSettings._iRecordsTotal = tmp ? defer[1] : defer;
 			}
 			
 			/*
@@ -398,113 +357,110 @@
 				} );
 			}
 			
+			// Must be done after everything which can be overridden by the state saving!
+			_fnCallbackReg( oSettings, 'aoDrawCallback', _fnSaveState );
+			
 			var features = oSettings.oFeatures;
-			var loadedInit = function () {
-				/*
-				 * Sorting
-				 * @todo For modularisation (1.11) this needs to do into a sort start up handler
-				 */
+			if ( oInit.bStateSave )
+			{
+				features.bStateSave = true;
+			}
 			
-				// If aaSorting is not defined, then we use the first indicator in asSorting
-				// in case that has been altered, so the default sort reflects that option
-				if ( oInit.aaSorting === undefined ) {
-					var sorting = oSettings.aaSorting;
-					for ( i=0, iLen=sorting.length ; i<iLen ; i++ ) {
-						sorting[i][1] = oSettings.aoColumns[ i ].asSorting[0];
-					}
+			// If aaSorting is not defined, then we use the first indicator in asSorting
+			// in case that has been altered, so the default sort reflects that option
+			if ( oInit.aaSorting === undefined ) {
+				var sorting = oSettings.aaSorting;
+				for ( i=0, iLen=sorting.length ; i<iLen ; i++ ) {
+					sorting[i][1] = oSettings.aoColumns[ i ].asSorting[0];
 				}
+			}
 			
-				/* Do a first pass on the sorting classes (allows any size changes to be taken into
-				 * account, and also will apply sorting disabled classes if disabled
-				 */
-				_fnSortingClasses( oSettings );
-			
-				_fnCallbackReg( oSettings, 'aoDrawCallback', function () {
-					if ( oSettings.bSorted || _fnDataSource( oSettings ) === 'ssp' || features.bDeferRender ) {
-						_fnSortingClasses( oSettings );
-					}
-				} );
+			// Do a first pass on the sorting classes (allows any size changes to be taken into
+			// account, and also will apply sorting disabled classes if disabled
+			_fnSortingClasses( oSettings );
 			
+			_fnCallbackReg( oSettings, 'aoDrawCallback', function () {
+				if ( oSettings.bSorted || _fnDataSource( oSettings ) === 'ssp' || features.bDeferRender ) {
+					_fnSortingClasses( oSettings );
+				}
+			} );
 			
-				/*
-				 * Final init
-				 * Cache the header, body and footer as required, creating them if needed
-				 */
-				var caption = $this.children('caption');
 			
-				if ( oSettings.caption ) {
-					if ( caption.length === 0 ) {
-						caption = $('<caption/>').appendTo( $this );
-					}
+			/*
+			 * Table HTML init
+			 * Cache the header, body and footer as required, creating them if needed
+			 */
+			var caption = $this.children('caption');
 			
-					caption.html( oSettings.caption );
+			if ( oSettings.caption ) {
+				if ( caption.length === 0 ) {
+					caption = $('<caption/>').appendTo( $this );
 				}
 			
-				// Store the caption side, so we can remove the element from the document
-				// when creating the element
-				if (caption.length) {
-					caption[0]._captionSide = caption.css('caption-side');
-					oSettings.captionNode = caption[0];
-				}
+				caption.html( oSettings.caption );
+			}
 			
-				if ( thead.length === 0 ) {
-					thead = $('<thead/>').appendTo($this);
-				}
-				oSettings.nTHead = thead[0];
-				$('tr', thead).addClass(oClasses.thead.row);
+			// Store the caption side, so we can remove the element from the document
+			// when creating the element
+			if (caption.length) {
+				caption[0]._captionSide = caption.css('caption-side');
+				oSettings.captionNode = caption[0];
+			}
 			
-				var tbody = $this.children('tbody');
-				if ( tbody.length === 0 ) {
-					tbody = $('<tbody/>').insertAfter(thead);
-				}
-				oSettings.nTBody = tbody[0];
+			if ( thead.length === 0 ) {
+				thead = $('<thead/>').appendTo($this);
+			}
+			oSettings.nTHead = thead[0];
 			
-				var tfoot = $this.children('tfoot');
-				if ( tfoot.length === 0 ) {
-					// If we are a scrolling table, and no footer has been given, then we need to create
-					// a tfoot element for the caption element to be appended to
-					tfoot = $('<tfoot/>').appendTo($this);
-				}
-				oSettings.nTFoot = tfoot[0];
-				$('tr', tfoot).addClass(oClasses.tfoot.row);
+			var tbody = $this.children('tbody');
+			if ( tbody.length === 0 ) {
+				tbody = $('<tbody/>').insertAfter(thead);
+			}
+			oSettings.nTBody = tbody[0];
 			
-				// Check if there is data passing into the constructor
-				if ( oInit.aaData ) {
-					for ( i=0 ; i<oInit.aaData.length ; i++ ) {
-						_fnAddData( oSettings, oInit.aaData[ i ] );
-					}
-				}
-				else if ( _fnDataSource( oSettings ) == 'dom' ) {
-					// Grab the data from the page
-					_fnAddTr( oSettings, $(oSettings.nTBody).children('tr') );
-				}
+			var tfoot = $this.children('tfoot');
+			if ( tfoot.length === 0 ) {
+				// If we are a scrolling table, and no footer has been given, then we need to create
+				// a tfoot element for the caption element to be appended to
+				tfoot = $('<tfoot/>').appendTo($this);
+			}
+			oSettings.nTFoot = tfoot[0];
 			
-				/* Copy the data index array */
-				oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
+			// Copy the data index array
+			oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
 			
-				/* Initialisation complete - table can be drawn */
-				oSettings.bInitialised = true;
+			// Initialisation complete - table can be drawn
+			oSettings.bInitialised = true;
 			
-				/* Check if we need to initialise the table (it might not have been handed off to the
-				 * language processor)
-				 */
-				if ( bInitHandedOff === false ) {
-					_fnInitialise( oSettings );
-				}
-			};
+			// Language definitions
+			var oLanguage = oSettings.oLanguage;
+			$.extend( true, oLanguage, oInit.oLanguage );
 			
-			/* Must be done after everything which can be overridden by the state saving! */
-			_fnCallbackReg( oSettings, 'aoDrawCallback', _fnSaveState );
+			if ( oLanguage.sUrl ) {
+				// Get the language definitions from a file
+				$.ajax( {
+					dataType: 'json',
+					url: oLanguage.sUrl,
+					success: function ( json ) {
+						_fnCamelToHungarian( defaults.oLanguage, json );
+						$.extend( true, oLanguage, json, oSettings.oInit.oLanguage );
 			
-			if ( oInit.bStateSave )
-			{
-				features.bStateSave = true;
-				_fnLoadState( oSettings, oInit, loadedInit );
+						_fnCallbackFire( oSettings, null, 'i18n', [oSettings], true);
+						_fnInitialise( oSettings );
+					},
+					error: function () {
+						// Error occurred loading language file
+						_fnLog( oSettings, 0, 'i18n file loading error', 21 );
+			
+						// Continue on as best we can
+						_fnInitialise( oSettings );
+					}
+				} );
 			}
 			else {
-				loadedInit();
+				_fnCallbackFire( oSettings, null, 'i18n', [oSettings], true);
+				_fnInitialise( oSettings );
 			}
-			
 		} );
 		_that = null;
 		return this;
@@ -1021,6 +977,15 @@
 		info: {
 			container: 'dt-info'
 		},
+		layout: {
+			row: 'dt-layout-row',
+			cell: 'dt-layout-cell',
+			tableRow: 'dt-layout-table',
+			tableCell: '',
+			start: 'dt-layout-start',
+			end: 'dt-layout-end',
+			full: 'dt-layout-full'
+		},
 		length: {
 			container: 'dt-length',
 			select: 'dt-input'
@@ -1069,7 +1034,8 @@
 			active: 'current',
 			button: 'dt-paging-button',
 			container: 'dt-paging',
-			disabled: 'disabled'
+			disabled: 'disabled',
+			nav: ''
 		}
 	} );
 	
@@ -1144,7 +1110,7 @@
 	};
 	
 	
-	var _isNumber = function ( d, decimalPoint, formatted ) {
+	var _isNumber = function ( d, decimalPoint, formatted, allowEmpty ) {
 		var type = typeof d;
 		var strType = type === 'string';
 	
@@ -1155,7 +1121,7 @@
 		// If empty return immediately so there must be a number if it is a
 		// formatted string (this stops the string "k", or "kr", etc being detected
 		// as a formatted number for currency
-		if ( _empty( d ) ) {
+		if ( allowEmpty && _empty( d ) ) {
 			return true;
 		}
 	
@@ -1177,8 +1143,8 @@
 	};
 	
 	// Is a string a number surrounded by HTML?
-	var _htmlNumeric = function ( d, decimalPoint, formatted ) {
-		if ( _empty( d ) ) {
+	var _htmlNumeric = function ( d, decimalPoint, formatted, allowEmpty ) {
+		if ( allowEmpty && _empty( d ) ) {
 			return true;
 		}
 	
@@ -1190,7 +1156,7 @@
 		var html = _isHtml( d );
 		return ! html ?
 			null :
-			_isNumber( _stripHtml( d ), decimalPoint, formatted ) ?
+			_isNumber( _stripHtml( d ), decimalPoint, formatted, allowEmpty ) ?
 				true :
 				null;
 	};
@@ -1232,7 +1198,7 @@
 		// is essential here
 		if ( prop2 !== undefined ) {
 			for ( ; i<ien ; i++ ) {
-				if ( a[ order[i] ][ prop ] ) {
+				if ( a[ order[i] ] && a[ order[i] ][ prop ] ) {
 					out.push( a[ order[i] ][ prop ][ prop2 ] );
 				}
 			}
@@ -1286,6 +1252,10 @@
 	
 	// Replaceable function in api.util
 	var _stripHtml = function (input) {
+		if (! input || typeof input !== 'string') {
+			return input;
+		}
+	
 		// Irrelevant check to workaround CodeQL's false positive on the regex
 		if (input.length > _max_str_len) {
 			throw new Error('Exceeded max str len');
@@ -1328,8 +1298,11 @@
 		}
 	
 		// It is faster to just run `normalize` than it is to check if
-		// we need to with a regex!
-		var res = str.normalize("NFD");
+		// we need to with a regex! (Check as it isn't available in old
+		// Safari)
+		var res = str.normalize
+			? str.normalize("NFD")
+			: str;
 	
 		// Equally, here we check if a regex is needed or not
 		return res.length !== str.length
@@ -2168,6 +2141,10 @@
 			var width = _fnColumnsSumWidth(settings, [i], false, false);
 	
 			cols[i].colEl.css('width', width);
+	
+			if (settings.oScroll.sX) {
+				cols[i].colEl.css('min-width', width);
+			}
 		}
 	}
 	
@@ -2252,6 +2229,21 @@
 		return a;
 	}
 	
+	/**
+	 * Allow the result from a type detection function to be `true` while
+	 * translating that into a string. Old type detection functions will
+	 * return the type name if it passes. An obect store would be better,
+	 * but not backwards compatible.
+	 *
+	 * @param {*} typeDetect Object or function for type detection
+	 * @param {*} res Result from the type detection function
+	 * @returns Type name or false
+	 */
+	function _typeResult (typeDetect, res) {
+		return res === true
+			? typeDetect._name
+			: res;
+	}
 	
 	/**
 	 * Calculate the 'type' of a column
@@ -2266,7 +2258,7 @@
 		var i, ien, j, jen, k, ken;
 		var col, detectedType, cache;
 	
-		// For each column, spin over the 
+		// For each column, spin over the data type detection functions, seeing if one matches
 		for ( i=0, ien=columns.length ; i<ien ; i++ ) {
 			col = columns[i];
 			cache = [];
@@ -2275,9 +2267,34 @@
 				col.sType = col._sManualType;
 			}
 			else if ( ! col.sType ) {
+				// With SSP type detection can be unreliable and error prone, so we provide a way
+				// to turn it off.
+				if (! settings.typeDetect) {
+					return;
+				}
+	
 				for ( j=0, jen=types.length ; j<jen ; j++ ) {
-					for ( k=0, ken=data.length ; k<ken ; k++ ) {
+					var typeDetect = types[j];
 	
+					// There can be either one, or three type detection functions
+					var oneOf = typeDetect.oneOf;
+					var allOf = typeDetect.allOf || typeDetect;
+					var init = typeDetect.init;
+					var one = false;
+	
+					detectedType = null;
+	
+					// Fast detect based on column assignment
+					if (init) {
+						detectedType = _typeResult(typeDetect, init(settings, col, i));
+	
+						if (detectedType) {
+							col.sType = detectedType;
+							break;
+						}
+					}
+	
+					for ( k=0, ken=data.length ; k<ken ; k++ ) {
 						if (! data[k]) {
 							continue;
 						}
@@ -2288,14 +2305,20 @@
 							cache[k] = _fnGetCellData( settings, k, i, 'type' );
 						}
 	
-						detectedType = types[j]( cache[k], settings );
+						// Only one data point in the column needs to match this function
+						if (oneOf && ! one) {
+							one = _typeResult(typeDetect, oneOf( cache[k], settings ));
+						}
+	
+						// All data points need to match this function
+						detectedType = _typeResult(typeDetect, allOf( cache[k], settings ));
 	
 						// If null, then this type can't apply to this column, so
 						// rather than testing all cells, break out. There is an
 						// exception for the last type which is `html`. We need to
 						// scan all rows since it is possible to mix string and HTML
 						// types
-						if ( ! detectedType && j !== types.length-2 ) {
+						if ( ! detectedType && j !== types.length-3 ) {
 							break;
 						}
 	
@@ -2309,7 +2332,7 @@
 	
 					// Type is valid for all data points in the column - use this
 					// type
-					if ( detectedType ) {
+					if ( (oneOf && one && detectedType) || (!oneOf && detectedType) ) {
 						col.sType = detectedType;
 						break;
 					}
@@ -2331,7 +2354,7 @@
 	
 			var renderer = _ext.type.render[col.sType];
 	
-			// This can only happen once! There is no way to remover
+			// This can only happen once! There is no way to remove
 			// a renderer. After the first time the renderer has
 			// already been set so createTr will run the renderer itself.
 			if (renderer && ! col._render) {
@@ -3001,8 +3024,8 @@
 	 * @returns 
 	 */
 	function _fnGetRowDisplay (settings, rowIdx) {
-		let rowModal = settings.aoData[rowIdx];
-		let columns = settings.aoColumns;
+		var rowModal = settings.aoData[rowIdx];
+		var columns = settings.aoColumns;
 	
 		if (! rowModal.displayData) {
 			// Need to render and cache
@@ -3087,6 +3110,9 @@
 					_fnWriteCell(nTd, display[i]);
 				}
 	
+				// column class
+				_addClass(nTd, oCol.sClass);
+	
 				// Visibility - add or remove as required
 				if ( oCol.bVisible && create )
 				{
@@ -3186,9 +3212,13 @@
 	
 			// Add the number of cells needed to make up to the number of columns
 			if (row.length === 1) {
-				var cells = $('td, th', row);
+				var cellCount = 0;
+				
+				$('td, th', row).each(function () {
+					cellCount += this.colSpan;
+				});
 	
-				for ( i=cells.length, ien=columns.length ; i<ien ; i++ ) {
+				for ( i=cellCount, ien=columns.length ; i<ien ; i++ ) {
 					$('<th/>')
 						.html( columns[i][titleProp] || '' )
 						.appendTo( row );
@@ -3200,14 +3230,13 @@
 	
 		if (side === 'header') {
 			settings.aoHeader = detected;
+			$('tr', target).addClass(classes.thead.row);
 		}
 		else {
 			settings.aoFooter = detected;
+			$('tr', target).addClass(classes.tfoot.row);
 		}
 	
-		// ARIA role for the rows
-		$(target).children('tr').attr('role', 'row');
-	
 		// Every cell needs to be passed through the renderer
 		$(target).children('tr').children('th, td')
 			.each( function () {
@@ -3375,7 +3404,13 @@
 		oSettings.bDrawing = true;
 	
 		/* Server-side processing draw intercept */
-		if ( !bServerSide )
+		if ( oSettings.deferLoading )
+		{
+			oSettings.deferLoading = false;
+			oSettings.iDraw++;
+			_fnProcessingDisplay( oSettings, false );
+		}
+		else if ( !bServerSide )
 		{
 			oSettings.iDraw++;
 		}
@@ -3412,7 +3447,6 @@
 					var td = aoData.anCells[i];
 	
 					_addClass(td, _ext.type.className[col.sType]); // auto class
-					_addClass(td, col.sClass); // column class
 					_addClass(td, oSettings.oClasses.tbody.cell); // all cells
 				}
 	
@@ -3476,6 +3510,9 @@
 			filter   = features.bFilter;
 	
 		if (recompute === undefined || recompute === true) {
+			// Resolve any column types that are unknown due to addition or invalidation
+			_fnColumnTypes( settings );
+	
 			if ( sort ) {
 				_fnSort( settings );
 			}
@@ -3531,113 +3568,154 @@
 	
 	
 	/**
-	 * Convert a `layout` object given by a user to the object structure needed
-	 * for the renderer. This is done twice, once for above and once for below
-	 * the table. Ordering must also be considered.
-	 *
-	 * @param {*} settings DataTables settings object
-	 * @param {*} layout Layout object to convert
-	 * @param {string} side `top` or `bottom`
-	 * @returns Converted array structure - one item for each row.
+	 * Expand the layout items into an object for the rendering function
 	 */
-	function _layoutArray ( settings, layout, side )
-	{
-		var groups = {};
-	
-		// Combine into like groups (e.g. `top`, `top2`, etc)
-		$.each( layout, function ( pos, val ) {
-			if (val === null) {
-				return;
+	function _layoutItems (row, align, items) {
+		if ( Array.isArray(items)) {
+			for (var i=0 ; i<items.length ; i++) {
+				_layoutItems(row, align, items[i]);
 			}
 	
-			var splitPos = pos.replace(/([A-Z])/g, ' $1').split(' ');
+			return;
+		}
 	
-			if ( ! groups[ splitPos[0] ] ) {
-				groups[ splitPos[0] ] = {};
-			}
+		var rowCell = row[align];
 	
-			var align = splitPos.length === 1 ?
-				'full' :
-				splitPos[1].toLowerCase();
-			var group = groups[ splitPos[0] ];
-			var groupRun = function (contents, innerVal) {
-				// If it is an object, then there can be multiple features contained in it
-				if ( $.isPlainObject( innerVal ) ) {
-					Object.keys(innerVal).map(function (key) {
-						contents.push( {
-							feature: key,
-							opts: innerVal[key]
-						});
-					});
+		// If it is an object, then there can be multiple features contained in it
+		if ( $.isPlainObject( items ) ) {
+			// A feature plugin cannot be named "features" due to this check
+			if (items.features) {
+				if (items.rowId) {
+					row.id = items.rowId;
 				}
-				else {
-					contents.push(innerVal);
+				if (items.rowClass) {
+					row.className = items.rowClass;
 				}
-			}
 	
-			// Transform to an object with a contents property
-			if (! group[align] || ! group[align].contents) {
-				group[align] = { contents: [] };
+				rowCell.id = items.id;
+				rowCell.className = items.className;
+	
+				_layoutItems(row, align, items.features);
 			}
+			else {
+				Object.keys(items).map(function (key) {
+					rowCell.contents.push( {
+						feature: key,
+						opts: items[key]
+					});
+				});
+			}
+		}
+		else {
+			rowCell.contents.push(items);
+		}
+	}
+	
+	/**
+	 * Find, or create a layout row
+	 */
+	function _layoutGetRow(rows, rowNum, align) {
+		var row;
+	
+		// Find existing rows
+		for (var i=0; i<rows.length; i++) {
+			row = rows[i];
 	
-			// Allow for an array or just a single object
-			if ( Array.isArray(val)) {
-				for (var i=0 ; i<val.length ; i++) {
-					groupRun(group[align].contents, val[i]);
+			if (row.rowNum === rowNum) {
+				// full is on its own, but start and end share a row
+				if (
+					(align === 'full' && row.full) ||
+					((align === 'start' || align === 'end') && (row.start || row.end))
+				) {
+					if (! row[align]) {
+						row[align] = {
+							contents: []
+						};
+					}
+	
+					return row;
 				}
 			}
-			else {
-				groupRun(group[ align ].contents, val);
+		}
+	
+		// If we get this far, then there was no match, create a new row
+		row = {
+			rowNum: rowNum	
+		};
+	
+		row[align] = {
+			contents: []
+		};
+	
+		rows.push(row);
+	
+		return row;
+	}
+	
+	/**
+	 * Convert a `layout` object given by a user to the object structure needed
+	 * for the renderer. This is done twice, once for above and once for below
+	 * the table. Ordering must also be considered.
+	 *
+	 * @param {*} settings DataTables settings object
+	 * @param {*} layout Layout object to convert
+	 * @param {string} side `top` or `bottom`
+	 * @returns Converted array structure - one item for each row.
+	 */
+	function _layoutArray ( settings, layout, side ) {
+		var rows = [];
+		
+		// Split out into an array
+		$.each( layout, function ( pos, items ) {
+			if (items === null) {
+				return;
 			}
 	
-			// And make contents an array
-			if ( ! Array.isArray( group[ align ].contents ) ) {
-				group[ align ].contents = [ group[ align ].contents ];
+			var parts = pos.match(/^([a-z]+)([0-9]*)([A-Za-z]*)$/);
+			var rowNum = parts[2]
+				? parts[2] * 1
+				: 0;
+			var align = parts[3]
+				? parts[3].toLowerCase()
+				: 'full';
+	
+			// Filter out the side we aren't interested in
+			if (parts[1] !== side) {
+				return;
 			}
-		} );
 	
-		var filtered = Object.keys(groups)
-			.map( function ( pos ) {
-				// Filter to only the side we need
-				if ( pos.indexOf(side) !== 0 ) {
-					return null;
-				}
+			// Get or create the row we should attach to
+			var row = _layoutGetRow(rows, rowNum, align);
 	
-				return {
-					name: pos,
-					val: groups[pos]
-				};
-			} )
-			.filter( function (item) {
-				return item !== null;
-			});
+			_layoutItems(row, align, items);
+		});
 	
 		// Order by item identifier
-		filtered.sort( function ( a, b ) {
-			var order1 = a.name.replace(/[^0-9]/g, '') * 1;
-			var order2 = b.name.replace(/[^0-9]/g, '') * 1;
+		rows.sort( function ( a, b ) {
+			var order1 = a.rowNum;
+			var order2 = b.rowNum;
+	
+			// If both in the same row, then the row with `full` comes first
+			if (order1 === order2) {
+				var ret = a.full && ! b.full ? -1 : 1;
+	
+				return side === 'bottom'
+					? ret * -1
+					: ret;
+			}
 	
 			return order2 - order1;
 		} );
-		
+	
+		// Invert for below the table
 		if ( side === 'bottom' ) {
-			filtered.reverse();
+			rows.reverse();
 		}
 	
-		// Split into rows
-		var rows = [];
-		for ( var i=0, ien=filtered.length ; i<ien ; i++ ) {
-			if (  filtered[i].val.full ) {
-				rows.push( { full: filtered[i].val.full } );
-				_layoutResolve( settings, rows[ rows.length - 1 ] );
-	
-				delete filtered[i].val.full;
-			}
+		for (var row = 0; row<rows.length; row++) {
+			delete rows[row].rowNum;
 	
-			if ( Object.keys(filtered[i].val).length ) {
-				rows.push( filtered[i].val );
-				_layoutResolve( settings, rows[ rows.length - 1 ] );
-			}
+			_layoutResolve(settings, rows[row]);
 		}
 	
 		return rows;
@@ -3661,6 +3739,10 @@
 		};
 	
 		var resolve = function ( item ) {
+			if (! row[ item ]) {
+				return;
+			}
+	
 			var line = row[ item ].contents;
 	
 			for ( var i=0, ien=line.length ; i<ien ; i++ ) {
@@ -3688,9 +3770,9 @@
 			}
 		};
 	
-		$.each( row, function ( key ) {
-			resolve( key );
-		} );
+		resolve('start');
+		resolve('end');
+		resolve('full');
 	}
 	
 	
@@ -4023,6 +4105,17 @@
 				_fnLog( oSettings, 0, error );
 			}
 	
+			// Microsoft often wrap JSON as a string in another JSON object
+			// Let's handle that automatically
+			if (json.d && typeof json.d === 'string') {
+				try {
+					json = JSON.parse(json.d);
+				}
+				catch (e) {
+					// noop
+				}
+			}
+	
 			oSettings.json = json;
 	
 			_fnCallbackFire( oSettings, null, 'xhr', [oSettings, json, oSettings.jqXHR], true );
@@ -4099,11 +4192,11 @@
 		else {
 			// Object to extend the base settings
 			oSettings.jqXHR = $.ajax( baseAjax );
+		}
 	
-			// Restore for next time around
-			if ( ajaxData ) {
-				ajax.data = ajaxData;
-			}
+		// Restore for next time around
+		if ( ajaxData ) {
+			ajax.data = ajaxData;
 		}
 	}
 	
@@ -4234,6 +4327,7 @@
 		}
 		settings.aiDisplay = settings.aiDisplayMaster.slice();
 	
+		_fnColumnTypes(settings);
 		_fnDraw( settings, true );
 		_fnInitComplete( settings );
 		_fnProcessingDisplay( settings, false );
@@ -4328,10 +4422,6 @@
 	{
 		var columnsSearch = settings.aoPreSearchCols;
 	
-		// Resolve any column types that are unknown due to addition or invalidation
-		// @todo As per sort - can this be moved into an event handler?
-		_fnColumnTypes( settings );
-	
 		// In server-side processing all filtering is done by the server, so no point hanging around here
 		if ( _fnDataSource( settings ) != 'ssp' )
 		{
@@ -4407,7 +4497,7 @@
 			// So the array reference doesn't break set the results into the
 			// existing array
 			displayRows.length = 0;
-			displayRows.push.apply(displayRows, rows);
+			_fnArrayApply(displayRows, rows);
 		}
 	}
 	
@@ -4636,66 +4726,90 @@
 	 */
 	function _fnInitialise ( settings )
 	{
-		var i, iAjaxStart=settings.iInitDisplayStart;
+		var i;
+		var init = settings.oInit;
+		var deferLoading = settings.deferLoading;
+		var dataSrc = _fnDataSource( settings );
 	
-		/* Ensure that the table data is fully initialised */
+		// Ensure that the table data is fully initialised
 		if ( ! settings.bInitialised ) {
 			setTimeout( function(){ _fnInitialise( settings ); }, 200 );
 			return;
 		}
 	
-		/* Build and draw the header / footer for the table */
+		// Build the header / footer for the table
 		_fnBuildHead( settings, 'header' );
 		_fnBuildHead( settings, 'footer' );
-		_fnDrawHead( settings, settings.aoHeader );
-		_fnDrawHead( settings, settings.aoFooter );
 	
-		// Enable features
-		_fnAddOptionsHtml( settings );
-		_fnSortInit( settings );
+		// Load the table's state (if needed) and then render around it and draw
+		_fnLoadState( settings, init, function () {
+			// Then draw the header / footer
+			_fnDrawHead( settings, settings.aoHeader );
+			_fnDrawHead( settings, settings.aoFooter );
 	
-		_colGroup( settings );
+			// Cache the paging start point, as the first redraw will reset it
+			var iAjaxStart = settings.iInitDisplayStart
 	
-		/* Okay to show that something is going on now */
-		_fnProcessingDisplay( settings, true );
+			// Local data load
+			// Check if there is data passing into the constructor
+			if ( init.aaData ) {
+				for ( i=0 ; i<init.aaData.length ; i++ ) {
+					_fnAddData( settings, init.aaData[ i ] );
+				}
+			}
+			else if ( deferLoading || dataSrc == 'dom' ) {
+				// Grab the data from the page
+				_fnAddTr( settings, $(settings.nTBody).children('tr') );
+			}
 	
-		_fnCallbackFire( settings, null, 'preInit', [settings], true );
+			// Filter not yet applied - copy the display master
+			settings.aiDisplay = settings.aiDisplayMaster.slice();
 	
-		// If there is default sorting required - let's do it. The sort function
-		// will do the drawing for us. Otherwise we draw the table regardless of the
-		// Ajax source - this allows the table to look initialised for Ajax sourcing
-		// data (show 'loading' message possibly)
-		_fnReDraw( settings );
+			// Enable features
+			_fnAddOptionsHtml( settings );
+			_fnSortInit( settings );
 	
-		var dataSrc = _fnDataSource( settings );
+			_colGroup( settings );
 	
-		// Server-side processing init complete is done by _fnAjaxUpdateDraw
-		if ( dataSrc != 'ssp' ) {
-			// if there is an ajax source load the data
-			if ( dataSrc == 'ajax' ) {
-				_fnBuildAjax( settings, {}, function(json) {
-					var aData = _fnAjaxDataSrc( settings, json );
+			/* Okay to show that something is going on now */
+			_fnProcessingDisplay( settings, true );
 	
-					// Got the data - add it to the table
-					for ( i=0 ; i<aData.length ; i++ ) {
-						_fnAddData( settings, aData[i] );
-					}
+			_fnCallbackFire( settings, null, 'preInit', [settings], true );
 	
-					// Reset the init display for cookie saving. We've already done
-					// a filter, and therefore cleared it before. So we need to make
-					// it appear 'fresh'
-					settings.iInitDisplayStart = iAjaxStart;
+			// If there is default sorting required - let's do it. The sort function
+			// will do the drawing for us. Otherwise we draw the table regardless of the
+			// Ajax source - this allows the table to look initialised for Ajax sourcing
+			// data (show 'loading' message possibly)
+			_fnReDraw( settings );
 	
-					_fnReDraw( settings );
-					_fnProcessingDisplay( settings, false );
+			// Server-side processing init complete is done by _fnAjaxUpdateDraw
+			if ( dataSrc != 'ssp' || deferLoading ) {
+				// if there is an ajax source load the data
+				if ( dataSrc == 'ajax' ) {
+					_fnBuildAjax( settings, {}, function(json) {
+						var aData = _fnAjaxDataSrc( settings, json );
+	
+						// Got the data - add it to the table
+						for ( i=0 ; i<aData.length ; i++ ) {
+							_fnAddData( settings, aData[i] );
+						}
+	
+						// Reset the init display for cookie saving. We've already done
+						// a filter, and therefore cleared it before. So we need to make
+						// it appear 'fresh'
+						settings.iInitDisplayStart = iAjaxStart;
+	
+						_fnReDraw( settings );
+						_fnProcessingDisplay( settings, false );
+						_fnInitComplete( settings );
+					}, settings );
+				}
+				else {
 					_fnInitComplete( settings );
-				}, settings );
-			}
-			else {
-				_fnInitComplete( settings );
-				_fnProcessingDisplay( settings, false );
+					_fnProcessingDisplay( settings, false );
+				}
 			}
-		}
+		} );
 	}
 	
 	
@@ -4850,8 +4964,37 @@
 	 */
 	function _fnProcessingDisplay ( settings, show )
 	{
+		// Ignore cases when we are still redrawing
+		if (settings.bDrawing && show === false) {
+			return;
+		}
+	
 		_fnCallbackFire( settings, null, 'processing', [settings, show] );
 	}
+	
+	/**
+	 * Show the processing element if an action takes longer than a given time
+	 *
+	 * @param {*} settings DataTables settings object
+	 * @param {*} enable Do (true) or not (false) async processing (local feature enablement)
+	 * @param {*} run Function to run
+	 */
+	function _fnProcessingRun( settings, enable, run ) {
+		if (! enable) {
+			// Immediate execution, synchronous
+			run();
+		}
+		else {
+			_fnProcessingDisplay(settings, true);
+			
+			// Allow the processing display to show if needed
+			setTimeout(function () {
+				run();
+	
+				_fnProcessingDisplay(settings, false);
+			}, 0);
+		}
+	}
 	/**
 	 * Add any control elements for the table - specifically scrolling
 	 *  @param {object} settings dataTables settings object
@@ -5078,21 +5221,44 @@
 		// is because of Responsive which might remove `col` elements, knocking the alignment
 		// of the indexes out.
 		if (settings.aiDisplay.length) {
-			// Get the column sizes from the first row in the table
-			var colSizes = table.children('tbody').eq(0).children('tr').eq(0).children('th, td').map(function (vis) {
-				return {
-					idx: _fnVisibleToColumnIndex(settings, vis),
-					width: $(this).outerWidth()
+			// Get the column sizes from the first row in the table. This should really be a
+			// [].find, but it wasn't supported in Chrome until Sept 2015, and DT has 10 year
+			// browser support
+			var firstTr = null;
+			var start = _fnDataSource( settings ) !== 'ssp'
+				? settings._iDisplayStart
+				: 0;
+	
+			for (i=start ; i<start + settings.aiDisplay.length ; i++) {
+				var idx = settings.aiDisplay[i];
+				var tr = settings.aoData[idx].nTr;
+	
+				if (tr) {
+					firstTr = tr;
+					break;
 				}
-			});
+			}
+	
+			if (firstTr) {
+				var colSizes = $(firstTr).children('th, td').map(function (vis) {
+					return {
+						idx: _fnVisibleToColumnIndex(settings, vis),
+						width: $(this).outerWidth()
+					};
+				});
+	
+				// Check against what the colgroup > col is set to and correct if needed
+				for (var i=0 ; i<colSizes.length ; i++) {
+					var colEl = settings.aoColumns[ colSizes[i].idx ].colEl[0];
+					var colWidth = colEl.style.width.replace('px', '');
 	
-			// Check against what the colgroup > col is set to and correct if needed
-			for (var i=0 ; i<colSizes.length ; i++) {
-				var colEl = settings.aoColumns[ colSizes[i].idx ].colEl[0];
-				var colWidth = colEl.style.width.replace('px', '');
+					if (colWidth !== colSizes[i].width) {
+						colEl.style.width = colSizes[i].width + 'px';
 	
-				if (colWidth !== colSizes[i].width) {
-					colEl.style.width = colSizes[i].width + 'px';
+						if (scroll.sX) {
+							colEl.style.minWidth = colSizes[i].width + 'px';
+						}
+					}
 				}
 			}
 		}
@@ -5182,8 +5348,25 @@
 			tableWidthAttr = table.getAttribute('width'), // from DOM element
 			tableContainer = table.parentNode,
 			i, column, columnIdx;
+			
+		var styleWidth = table.style.width;
+		var containerWidth = _fnWrapperWidth(settings);
+	
+		// Don't re-run for the same width as the last time
+		if (containerWidth === settings.containerWidth) {
+			return false;
+		}
+	
+		settings.containerWidth = containerWidth;
+	
+		// If there is no width applied as a CSS style or as an attribute, we assume that
+		// the width is intended to be 100%, which is usually is in CSS, but it is very
+		// difficult to correctly parse the rules to get the final result.
+		if ( ! styleWidth && ! tableWidthAttr) {
+			table.style.width = '100%';
+			styleWidth = '100%';
+		}
 	
-		var styleWidth = table.style.width;
 		if ( styleWidth && styleWidth.indexOf('%') !== -1 ) {
 			tableWidthAttr = styleWidth;
 		}
@@ -5232,6 +5415,8 @@
 				// browser will collapse it. If this width is smaller than the
 				// width the column requires, then it will have no effect
 				if ( scrollX ) {
+					this.style.minWidth = width;
+	
 					$( this ).append( $('<div/>').css( {
 						width: width,
 						margin: 0,
@@ -5300,15 +5485,15 @@
 	
 			// If there is no width attribute or style, then allow the table to
 			// collapse
-			if ( tmpTable.width() < tableContainer.clientWidth && tableWidthAttr ) {
-				tmpTable.width( tableContainer.clientWidth );
+			if ( tmpTable.outerWidth() < tableContainer.clientWidth && tableWidthAttr ) {
+				tmpTable.outerWidth( tableContainer.clientWidth );
 			}
 		}
 		else if ( scrollY ) {
-			tmpTable.width( tableContainer.clientWidth );
+			tmpTable.outerWidth( tableContainer.clientWidth );
 		}
 		else if ( tableWidthAttr ) {
-			tmpTable.width( tableWidthAttr );
+			tmpTable.outerWidth( tableWidthAttr );
 		}
 	
 		// Get the width of each column in the constructed table
@@ -5341,20 +5526,64 @@
 		}
 	
 		if ( (tableWidthAttr || scrollX) && ! settings._reszEvt ) {
-			var bindResize = function () {
-				$(window).on('resize.DT-'+settings.sInstance, DataTable.util.throttle( function () {
-					if (! settings.bDestroying) {
-						_fnAdjustColumnSizing( settings );
+			var resize = DataTable.util.throttle( function () {
+				var newWidth = _fnWrapperWidth(settings);
+	
+				// Don't do it if destroying or the container width is 0
+				if (! settings.bDestroying && newWidth !== 0) {
+					_fnAdjustColumnSizing( settings );
+				}
+			} );
+	
+			// For browsers that support it (~2020 onwards for wide support) we can watch for the
+			// container changing width.
+			if (window.ResizeObserver) {
+				// This is a tricky beast - if the element is visible when `.observe()` is called,
+				// then the callback is immediately run. Which we don't want. If the element isn't
+				// visible, then it isn't run, but we want it to run when it is then made visible.
+				// This flag allows the above to be satisfied.
+				var first = $(settings.nTableWrapper).is(':visible');
+	
+				// Use an empty div to attach the observer so it isn't impacted by height changes
+				var resizer = $('<div>')
+					.css({
+						width: '100%',
+						height: 0
+					})
+					.addClass('dt-autosize')
+					.appendTo(settings.nTableWrapper);
+	
+				settings.resizeObserver = new ResizeObserver(function (e) {
+					if (first) {
+						first = false;
 					}
-				} ) );
-			};
+					else {
+						resize();
+					}
+				});
 	
-			bindResize();
+				settings.resizeObserver.observe(resizer[0]);
+			}
+			else {
+				// For old browsers, the best we can do is listen for a window resize
+				$(window).on('resize.DT-'+settings.sInstance, resize);
+			}
 	
 			settings._reszEvt = true;
 		}
 	}
 	
+	/**
+	 * Get the width of the DataTables wrapper element
+	 *
+	 * @param {*} settings DataTables settings object
+	 * @returns Width
+	 */
+	function _fnWrapperWidth(settings) {
+		return $(settings.nTableWrapper).is(':visible')
+			? $(settings.nTableWrapper).width()
+			: 0;
+	}
 	
 	/**
 	 * Get the maximum strlen for each data column
@@ -5497,22 +5726,16 @@
 				}
 	
 				if (run) {
-					_fnProcessingDisplay( settings, true );
-	
-					// Allow the processing display to show
-					setTimeout( function () {
+					_fnProcessingRun(settings, true, function () {
 						_fnSort( settings );
 						_fnSortDisplay( settings, settings.aiDisplay );
 	
-						// Sort processing done - redraw has its own processing display
-						_fnProcessingDisplay( settings, false );
-	
 						_fnReDraw( settings, false, false );
 	
 						if (callback) {
 							callback();
 						}
-					}, 0);
+					});
 				}
 			}
 		} );
@@ -5671,15 +5894,14 @@
 			displayMaster = oSettings.aiDisplayMaster,
 			aSort;
 	
-		// Resolve any column types that are unknown due to addition or invalidation
-		// @todo Can this be moved into a 'data-ready' handler which is called when
-		//   data is going to be used in the table?
-		_fnColumnTypes( oSettings );
+		// Make sure the columns all have types defined
+		_fnColumnTypes(oSettings);
 	
 		// Allow a specific column to be sorted, which will _not_ alter the display
 		// master
 		if (col !== undefined) {
 			var srcCol = oSettings.aoColumns[col];
+	
 			aSort = [{
 				src:       col,
 				col:       col,
@@ -5712,7 +5934,7 @@
 	
 			// If the first sort is desc, then reverse the array to preserve original
 			// order, just in reverse
-			if (aSort.length && aSort[0].dir === 'desc') {
+			if (aSort.length && aSort[0].dir === 'desc' && oSettings.orderDescReverse) {
 				aiOrig.reverse();
 			}
 	
@@ -5782,6 +6004,7 @@
 		if (col === undefined) {
 			// Tell the draw function that we have sorted the data
 			oSettings.bSorted = true;
+			oSettings.sortDetails = aSort;
 	
 			_fnCallbackFire( oSettings, null, 'order', [oSettings, aSort] );
 		}
@@ -5973,15 +6196,26 @@
 			return;
 		}
 	
+		// Sort state saving uses [[idx, order]] structure.
+		var sorting = [];
+		_fnSortResolve(settings, sorting, settings.aaSorting );
+	
 		/* Store the interesting variables */
+		var columns = settings.aoColumns;
 		var state = {
 			time:    +new Date(),
 			start:   settings._iDisplayStart,
 			length:  settings._iDisplayLength,
-			order:   $.extend( true, [], settings.aaSorting ),
+			order:   sorting.map(function (sort) {
+				// If a column name is available, use it
+				return columns[sort[0]] && columns[sort[0]].sName
+					? [ columns[sort[0]].sName, sort[1] ]
+					: sort.slice();
+			} ),
 			search:  $.extend({}, settings.oPreviousSearch),
 			columns: settings.aoColumns.map( function ( col, i ) {
 				return {
+					name: col.sName,
 					visible: col.bVisible,
 					search: $.extend({}, settings.aoPreSearchCols[i])
 				};
@@ -6029,6 +6263,8 @@
 	function _fnImplementState ( settings, s, callback) {
 		var i, ien;
 		var columns = settings.aoColumns;
+		var currentNames = _pluck(settings.aoColumns, 'sName');
+	
 		settings._bLoadingState = true;
 	
 		// When StateRestore was introduced the state could now be implemented at any time
@@ -6058,13 +6294,6 @@
 			return;
 		}
 	
-		// Number of columns have changed - all bets are off, no restore of settings
-		if ( s.columns && columns.length !== s.columns.length ) {
-			settings._bLoadingState = false;
-			callback();
-			return;
-		}
-	
 		// Store the saved state so it might be accessed at any time
 		settings.oLoadedState = $.extend( true, {}, s );
 	
@@ -6083,8 +6312,7 @@
 			}
 		}
 	
-		// Restore key features - todo - for 1.11 this needs to be done by
-		// subscribed events
+		// Restore key features
 		if ( s.start !== undefined ) {
 			if(api === null) {
 				settings._iDisplayStart    = s.start;
@@ -6099,10 +6327,23 @@
 		if ( s.order !== undefined ) {
 			settings.aaSorting = [];
 			$.each( s.order, function ( i, col ) {
-				settings.aaSorting.push( col[0] >= columns.length ?
-					[ 0, col[1] ] :
-					col
-				);
+				var set = [ col[0], col[1] ];
+	
+				// A column name was stored and should be used for restore
+				if (typeof col[0] === 'string') {
+					var idx = currentNames.indexOf(col[0]);
+	
+					// Find the name from the current list of column names, or fallback to index 0
+					set[0] = idx >= 0
+						? idx
+						: 0;
+				}
+				else if (set[0] >= columns.length) {
+					// If a column name, but it is out of bounds, set to 0
+					set[0] = 0;
+				}
+	
+				settings.aaSorting.push(set);
 			} );
 		}
 	
@@ -6113,31 +6354,65 @@
 	
 		// Columns
 		if ( s.columns ) {
-			for ( i=0, ien=s.columns.length ; i<ien ; i++ ) {
-				var col = s.columns[i];
-	
-				// Visibility
-				if ( col.visible !== undefined ) {
-					// If the api is defined, the table has been initialised so we need to use it rather than internal settings
-					if (api) {
-						// Don't redraw the columns on every iteration of this loop, we will do this at the end instead
-						api.column(i).visible(col.visible, false);
+			var set = s.columns;
+			var incoming = _pluck(s.columns, 'name');
+	
+			// Check if it is a 2.2 style state object with a `name` property for the columns, and if
+			// the name was defined. If so, then create a new array that will map the state object
+			// given, to the current columns (don't bother if they are already matching tho).
+			if (incoming.join('').length && incoming.join('') !== currentNames.join('')) {
+				set = [];
+	
+				// For each column, try to find the name in the incoming array
+				for (i=0 ; i<currentNames.length ; i++) {
+					if (currentNames[i] != '') {
+						var idx = incoming.indexOf(currentNames[i]);
+	
+						if (idx >= 0) {
+							set.push(s.columns[idx]);
+						}
+						else {
+							// No matching column name in the state's columns, so this might be a new
+							// column and thus can't have a state already.
+							set.push({});
+						}
 					}
 					else {
-						columns[i].bVisible = col.visible;
+						// If no name, but other columns did have a name, then there is no knowing
+						// where this one came from originally so it can't be restored.
+						set.push({});
+					}
+				}
+			}
+	
+			// If the number of columns to restore is different from current, then all bets are off.
+			if (set.length === columns.length) {
+				for ( i=0, ien=set.length ; i<ien ; i++ ) {
+					var col = set[i];
+	
+					// Visibility
+					if ( col.visible !== undefined ) {
+						// If the api is defined, the table has been initialised so we need to use it rather than internal settings
+						if (api) {
+							// Don't redraw the columns on every iteration of this loop, we will do this at the end instead
+							api.column(i).visible(col.visible, false);
+						}
+						else {
+							columns[i].bVisible = col.visible;
+						}
+					}
+	
+					// Search
+					if ( col.search !== undefined ) {
+						$.extend( settings.aoPreSearchCols[i], col.search );
 					}
 				}
 	
-				// Search
-				if ( col.search !== undefined ) {
-					$.extend( settings.aoPreSearchCols[i], col.search );
+				// If the api is defined then we need to adjust the columns once the visibility has been changed
+				if (api) {
+					api.columns.adjust();
 				}
 			}
-			
-			// If the api is defined then we need to adjust the columns once the visibility has been changed
-			if (api) {
-				api.columns.adjust();
-			}
 		}
 	
 		settings._bLoadingState = false;
@@ -6454,6 +6729,30 @@
 			replace(/_ENTRIES-TOTAL_/g, settings.api.i18n('entries', '', vis) );
 	}
 	
+	/**
+	 * Add elements to an array as quickly as possible, but stack stafe.
+	 *
+	 * @param {*} arr Array to add the data to
+	 * @param {*} data Data array that is to be added
+	 * @returns 
+	 */
+	function _fnArrayApply(arr, data) {
+		if (! data) {
+			return;
+		}
+	
+		// Chrome can throw a max stack error if apply is called with
+		// too large an array, but apply is faster.
+		if (data.length < 10000) {
+			arr.push.apply(arr, data);
+		}
+		else {
+			for (i=0 ; i<data.length ; i++) {
+				arr.push(data[i]);
+			}
+		}
+	}
+	
 	
 	
 	/**
@@ -6622,6 +6921,7 @@
 			return new _Api( context, data );
 		}
 	
+		var i;
 		var settings = [];
 		var ctxSettings = function ( o ) {
 			var a = _toSettings( o );
@@ -6631,7 +6931,7 @@
 		};
 	
 		if ( Array.isArray( context ) ) {
-			for ( var i=0, ien=context.length ; i<ien ; i++ ) {
+			for ( i=0 ; i<context.length ; i++ ) {
 				ctxSettings( context[i] );
 			}
 		}
@@ -6645,9 +6945,7 @@
 			: settings;
 	
 		// Initial data
-		if ( data ) {
-			this.push.apply(this, data);
-		}
+		_fnArrayApply(this, data);
 	
 		// selector
 		this.selector = {
@@ -7028,7 +7326,7 @@
 			selector.forEach(function (sel) {
 				var inner = __table_selector(sel, a);
 	
-				result.push.apply(result, inner);
+				_fnArrayApply(result, inner);
 			});
 	
 			return result.filter( function (item) {
@@ -7529,7 +7827,7 @@
 	// Reduce the API instance to the first item found
 	var _selector_first = function ( old )
 	{
-		let inst = new _Api(old.context[0]);
+		var inst = new _Api(old.context[0]);
 	
 		// Use a push rather than passing to the constructor, since it will
 		// merge arrays down automatically, which isn't what is wanted here
@@ -7882,7 +8180,7 @@
 		// Return an Api.rows() extended instance, so rows().nodes() etc can be used
 		var modRows = this.rows( -1 );
 		modRows.pop();
-		modRows.push.apply(modRows, newRows);
+		_fnArrayApply(modRows, newRows);
 	
 		return modRows;
 	} );
@@ -8336,8 +8634,10 @@
 				switch( match[2] ) {
 					case 'visIdx':
 					case 'visible':
-						if (match[1]) {
+						// Selector is a column index
+						if (match[1] && match[1].match(/^\d+$/)) {
 							var idx = parseInt( match[1], 10 );
+	
 							// Visible index given, convert to column index
 							if ( idx < 0 ) {
 								// Counting from the right
@@ -8350,9 +8650,19 @@
 							return [ _fnVisibleToColumnIndex( settings, idx ) ];
 						}
 						
-						// `:visible` on its own
-						return columns.map( function (col, i) {
-							return col.bVisible ? i : null;
+						return columns.map( function (col, idx) {
+							// Not visible, can't match
+							if (! col.bVisible) {
+								return null;
+							}
+	
+							// Selector
+							if (match[1]) {
+								return $(nodes[idx]).filter(match[1]).length > 0 ? idx : null;
+							}
+	
+							// `:visible` on its own
+							return idx;
 						} );
 	
 					case 'name':
@@ -8383,7 +8693,10 @@
 				.map( function () {
 					return _fnColumnsFromHeader( this ); // `nodes` is column index complete and in order
 				} )
-				.toArray();
+				.toArray()
+				.sort(function (a, b) {
+					return a - b;
+				});
 	
 			if ( jqResult.length || ! s.nodeName ) {
 				return jqResult;
@@ -8637,6 +8950,10 @@
 	
 	_api_register( 'columns.adjust()', function () {
 		return this.iterator( 'table', function ( settings ) {
+			// Force a column sizing to happen with a manual call - otherwise it can skip
+			// if the size hasn't changed
+			settings.containerWidth = -1;
+	
 			_fnAdjustColumnSizing( settings );
 		}, 1 );
 	} );
@@ -9202,24 +9519,81 @@
 		} );
 	} );
 	
+	// Can be assigned in DateTable.use() - note luxon and moment vars are in helpers.js
+	var __bootstrap;
+	var __foundation;
+	
 	/**
-	 * Set the jQuery or window object to be used by DataTables
-	 *
-	 * @param {*} module Library / container object
-	 * @param {string} [type] Library or container type `lib`, `win` or `datetime`.
-	 *   If not provided, automatic detection is attempted.
-	 */
-	DataTable.use = function (module, type) {
-		if (type === 'lib' || module.fn) {
+	 * Set the libraries that DataTables uses, or the global objects.
+	 * Note that the arguments can be either way around (legacy support)
+	 * and the second is optional. See docs.
+	 */
+	DataTable.use = function (arg1, arg2) {
+		// Reverse arguments for legacy support
+		var module = typeof arg1 === 'string'
+			? arg2
+			: arg1;
+		var type = typeof arg2 === 'string'
+			? arg2
+			: arg1;
+	
+		// Getter
+		if (module === undefined && typeof type === 'string') {
+			switch (type) {
+				case 'lib':
+				case 'jq':
+					return $;
+	
+				case 'win':
+					return window;
+	
+				case 'datetime':
+					return DataTable.DateTime;
+	
+				case 'luxon':
+					return __luxon;
+	
+				case 'moment':
+					return __moment;
+	
+				case 'bootstrap':
+					// Use local if set, otherwise try window, which could be undefined
+					return __bootstrap || window.bootstrap;
+	
+				case 'foundation':
+					// Ditto
+					return __foundation || window.Foundation;
+	
+				default:
+					return null;
+			}
+		}
+	
+		// Setter
+		if (type === 'lib' || type === 'jq' || (module && module.fn && module.fn.jquery)) {
 			$ = module;
 		}
-		else if (type == 'win' || module.document) {
+		else if (type === 'win' || (module && module.document)) {
 			window = module;
 			document = module.document;
 		}
-		else if (type === 'datetime' || module.type === 'DateTime') {
+		else if (type === 'datetime' || (module && module.type === 'DateTime')) {
 			DataTable.DateTime = module;
 		}
+		else if (type === 'luxon' || (module && module.FixedOffsetZone)) {
+			__luxon = module;
+		}
+		else if (type === 'moment' || (module && module.isMoment)) {
+			__moment = module;
+		}
+		else if (type === 'bootstrap' || (module && module.Modal && module.Modal.NAME === 'modal'))
+		{
+			// This is currently for BS5 only. BS3/4 attach to jQuery, so no need to use `.use()`
+			__bootstrap = module;
+		}
+		else if (type === 'foundation' || (module && module.Reveal)) {
+			__foundation = module;
+		}
 	}
 	
 	/**
@@ -9471,12 +9845,14 @@
 		// Function to run either once the table becomes ready or
 		// immediately if it is already ready.
 		return this.tables().every(function () {
+			var api = this;
+	
 			if (this.context[0]._bInitComplete) {
-				fn.call(this);
+				fn.call(api);
 			}
 			else {
-				this.on('init', function () {
-					fn.call(this);
+				this.on('init.dt.DT', function () {
+					fn.call(api);
 				});
 			}
 		} );
@@ -9510,6 +9886,11 @@
 				new _Api( settings ).columns().visible( true );
 			}
 	
+			// Container width change listener
+			if (settings.resizeObserver) {
+				settings.resizeObserver.disconnect();
+			}
+	
 			// Blitz all `DT` namespaced events (these are internal events, the
 			// lowercase, `dt` events are user subscribed and they are responsible
 			// for removing them
@@ -9527,20 +9908,37 @@
 				jqTable.append( tfoot );
 			}
 	
+			// Clean up the header
+			$(thead).find('span.dt-column-order').remove();
+			$(thead).find('span.dt-column-title').each(function () {
+				var title = $(this).html();
+				$(this).parent().append(title);
+				$(this).remove();
+			});
+	
 			settings.colgroup.remove();
 	
 			settings.aaSorting = [];
 			settings.aaSortingFixed = [];
 			_fnSortingClasses( settings );
 	
+			$(jqTable).find('th, td').removeClass(
+				$.map(DataTable.ext.type.className, function (v) {
+					return v;
+				}).join(' ')
+			);
+	
 			$('th, td', thead)
 				.removeClass(
+					orderClasses.none + ' ' +
 					orderClasses.canAsc + ' ' +
 					orderClasses.canDesc + ' ' +
 					orderClasses.isAsc + ' ' +
 					orderClasses.isDesc
 				)
-				.css('width', '');
+				.css('width', '')
+				.removeAttr('data-dt-column')
+				.removeAttr('aria-sort');
 	
 			// Add the TR elements back into the table in their original order
 			jqTbody.children().detach();
@@ -9628,7 +10026,7 @@
 	 *  @type string
 	 *  @default Version number
 	 */
-	DataTable.version = "2.0.8";
+	DataTable.version = "2.2.2";
 	
 	/**
 	 * Private data store, containing all of the settings objects that are
@@ -10473,7 +10871,8 @@
 					first: 'First',
 					last: 'Last',
 					next: 'Next',
-					previous: 'Previous'
+					previous: 'Previous',
+					number: ''
 				}
 			},
 	
@@ -10653,6 +11052,10 @@
 		},
 	
 	
+		/** The initial data order is reversed when `desc` ordering */
+		orderDescReverse: true,
+	
+	
 		/**
 		 * This parameter allows you to have define the global filtering state at
 		 * initialisation time. As an object the `search` parameter must be
@@ -10701,7 +11104,7 @@
 		 * * `full_numbers` - 'First', 'Previous', 'Next' and 'Last' buttons, plus page numbers
 		 * * `first_last_numbers` - 'First' and 'Last' buttons, plus page numbers
 		 */
-		"sPaginationType": "full_numbers",
+		"sPaginationType": "",
 	
 	
 		/**
@@ -10771,7 +11174,13 @@
 		/**
 		 * Caption value
 		 */
-		"caption": null
+		"caption": null,
+	
+	
+		/**
+		 * For server-side processing - use the data from the DOM for the first draw
+		 */
+		iDeferLoading: null
 	};
 	
 	_fnHungarianMap( DataTable.defaults );
@@ -11714,7 +12123,19 @@
 	
 		captionNode: null,
 	
-		colgroup: null
+		colgroup: null,
+	
+		/** Delay loading of data */
+		deferLoading: null,
+	
+		/** Allow auto type detection */
+		typeDetect: true,
+	
+		/** ResizeObserver for the container div */
+		resizeObserver: null,
+	
+		/** Keep a record of the last size of the container, so we can skip duplicates */
+		containerWidth: -1
 	};
 	
 	/**
@@ -11738,7 +12159,7 @@
 		},
 	
 		full: function () {
-			return [  'first', 'previous', 'next', 'last' ];
+			return [ 'first', 'previous', 'next', 'last' ];
 		},
 	
 		numbers: function () {
@@ -11752,11 +12173,11 @@
 		full_numbers: function () {
 			return [ 'first', 'previous', 'numbers', 'next', 'last' ];
 		},
-		
+	
 		first_last: function () {
 			return ['first', 'last'];
 		},
-		
+	
 		first_last_numbers: function () {
 			return ['first', 'numbers', 'last'];
 		},
@@ -11838,44 +12259,62 @@
 	 * to make working with DataTables a little bit easier.
 	 */
 	
-	function __mldFnName(name) {
-		return name.replace(/[\W]/g, '_')
-	}
-	
-	// Common logic for moment, luxon or a date action
-	function __mld( dt, momentFn, luxonFn, dateFn, arg1 ) {
-		if (window.moment) {
-			return dt[momentFn]( arg1 );
+	/**
+	 * Common logic for moment, luxon or a date action.
+	 *
+	 * Happens after __mldObj, so don't need to call `resolveWindowsLibs` again
+	 */
+	function __mld( dtLib, momentFn, luxonFn, dateFn, arg1 ) {
+		if (__moment) {
+			return dtLib[momentFn]( arg1 );
 		}
-		else if (window.luxon) {
-			return dt[luxonFn]( arg1 );
+		else if (__luxon) {
+			return dtLib[luxonFn]( arg1 );
 		}
 		
-		return dateFn ? dt[dateFn]( arg1 ) : dt;
+		return dateFn ? dtLib[dateFn]( arg1 ) : dtLib;
 	}
 	
 	
 	var __mlWarning = false;
+	var __luxon; // Can be assigned in DateTable.use()
+	var __moment; // Can be assigned in DateTable.use()
+	
+	/**
+	 * 
+	 */
+	function resolveWindowLibs() {
+		if (window.luxon && ! __luxon) {
+			__luxon = window.luxon;
+		}
+		
+		if (window.moment && ! __moment) {
+			__moment = window.moment;
+		}
+	}
+	
 	function __mldObj (d, format, locale) {
 		var dt;
 	
-		if (window.moment) {
-			dt = window.moment.utc( d, format, locale, true );
+		resolveWindowLibs();
+	
+		if (__moment) {
+			dt = __moment.utc( d, format, locale, true );
 	
 			if (! dt.isValid()) {
 				return null;
 			}
 		}
-		else if (window.luxon) {
+		else if (__luxon) {
 			dt = format && typeof d === 'string'
-				? window.luxon.DateTime.fromFormat( d, format )
-				: window.luxon.DateTime.fromISO( d );
+				? __luxon.DateTime.fromFormat( d, format )
+				: __luxon.DateTime.fromISO( d );
 	
 			if (! dt.isValid) {
 				return null;
 			}
 	
-			dt.setLocale(locale);
+			dt = dt.setLocale(locale);
 		}
 		else if (! format) {
 			// No format given, must be ISO
@@ -11914,11 +12353,11 @@
 				from = null;
 			}
 	
-			var typeName = 'datetime' + (to ? '-' + __mldFnName(to) : '');
+			var typeName = 'datetime' + (to ? '-' + to : '');
 	
 			// Add type detection and sorting specific to this date format - we need to be able to identify
 			// date type columns as such, rather than as numbers in extensions. Hence the need for this.
-			if (! DataTable.ext.type.order[typeName]) {
+			if (! DataTable.ext.type.order[typeName + '-pre']) {
 				DataTable.type(typeName, {
 					detect: function (d) {
 						// The renderer will give the value to type detect as the type!
@@ -12017,7 +12456,7 @@
 	
 	// Formatted date time detection - use by declaring the formats you are going to use
 	DataTable.datetime = function ( format, locale ) {
-		var typeName = 'datetime-detect-' + __mldFnName(format);
+		var typeName = 'datetime-' + format;
 	
 		if (! locale) {
 			locale = 'en';
@@ -12157,7 +12596,7 @@
 			return {
 				className: _extTypes.className[name],
 				detect: _extTypes.detect.find(function (fn) {
-					return fn.name === name;
+					return fn._name === name;
 				}),
 				order: {
 					pre: _extTypes.order[name + '-pre'],
@@ -12172,27 +12611,20 @@
 		var setProp = function(prop, propVal) {
 			_extTypes[prop][name] = propVal;
 		};
-		var setDetect = function (fn) {
-			// Wrap to allow the function to return `true` rather than
-			// specifying the type name.
-			var cb = function (d, s) {
-				var ret = fn(d, s);
-	
-				return ret === true
-					? name
-					: ret;
-			};
-			Object.defineProperty(cb, "name", {value: name});
+		var setDetect = function (detect) {
+			// `detect` can be a function or an object - we set a name
+			// property for either - that is used for the detection
+			Object.defineProperty(detect, "_name", {value: name});
 	
-			var idx = _extTypes.detect.findIndex(function (fn) {
-				return fn.name === name;
+			var idx = _extTypes.detect.findIndex(function (item) {
+				return item._name === name;
 			});
 	
 			if (idx === -1) {
-				_extTypes.detect.unshift(cb);
+				_extTypes.detect.unshift(detect);
 			}
 			else {
-				_extTypes.detect.splice(idx, 1, cb);
+				_extTypes.detect.splice(idx, 1, detect);
 			}
 		};
 		var setOrder = function (obj) {
@@ -12248,10 +12680,30 @@
 	// Get a list of types
 	DataTable.types = function () {
 		return _extTypes.detect.map(function (fn) {
-			return fn.name;
+			return fn._name;
 		});
 	};
 	
+	var __diacriticSort = function (a, b) {
+		a = a !== null && a !== undefined ? a.toString().toLowerCase() : '';
+		b = b !== null && b !== undefined ? b.toString().toLowerCase() : '';
+	
+		// Checked for `navigator.languages` support in `oneOf` so this code can't execute in old
+		// Safari and thus can disable this check
+		// eslint-disable-next-line compat/compat
+		return a.localeCompare(b, navigator.languages[0] || navigator.language, {
+			numeric: true,
+			ignorePunctuation: true,
+		});
+	}
+	
+	var __diacriticHtmlSort = function (a, b) {
+		a = _stripHtml(a);
+		b = _stripHtml(b);
+	
+		return __diacriticSort(a, b);
+	}
+	
 	//
 	// Built in data types
 	//
@@ -12264,7 +12716,7 @@
 			pre: function ( a ) {
 				// This is a little complex, but faster than always calling toString,
 				// http://jsperf.com/tostring-v-check
-				return _empty(a) ?
+				return _empty(a) && typeof a !== 'boolean' ?
 					'' :
 					typeof a === 'string' ?
 						a.toLowerCase() :
@@ -12276,11 +12728,38 @@
 		search: _filterString(false, true)
 	});
 	
+	DataTable.type('string-utf8', {
+		detect: {
+			allOf: function ( d ) {
+				return true;
+			},
+			oneOf: function ( d ) {
+				// At least one data point must contain a non-ASCII character
+				// This line will also check if navigator.languages is supported or not. If not (Safari 10.0-)
+				// this data type won't be supported.
+				// eslint-disable-next-line compat/compat
+				return ! _empty( d ) && navigator.languages && typeof d === 'string' && d.match(/[^\x00-\x7F]/);
+			}
+		},
+		order: {
+			asc: __diacriticSort,
+			desc: function (a, b) {
+				return __diacriticSort(a, b) * -1;
+			}
+		},
+		search: _filterString(false, true)
+	});
+	
 	
 	DataTable.type('html', {
-		detect: function ( d ) {
-			return _empty( d ) || (typeof d === 'string' && d.indexOf('<') !== -1) ?
-				'html' : null;
+		detect: {
+			allOf: function ( d ) {
+				return _empty( d ) || (typeof d === 'string' && d.indexOf('<') !== -1);
+			},
+			oneOf: function ( d ) {
+				// At least one data point must contain a `<`
+				return ! _empty( d ) && typeof d === 'string' && d.indexOf('<') !== -1;
+			}
 		},
 		order: {
 			pre: function ( a ) {
@@ -12295,18 +12774,48 @@
 	});
 	
 	
+	DataTable.type('html-utf8', {
+		detect: {
+			allOf: function ( d ) {
+				return _empty( d ) || (typeof d === 'string' && d.indexOf('<') !== -1);
+			},
+			oneOf: function ( d ) {
+				// At least one data point must contain a `<` and a non-ASCII character
+				// eslint-disable-next-line compat/compat
+				return navigator.languages &&
+					! _empty( d ) &&
+					typeof d === 'string' &&
+					d.indexOf('<') !== -1 &&
+					typeof d === 'string' && d.match(/[^\x00-\x7F]/);
+			}
+		},
+		order: {
+			asc: __diacriticHtmlSort,
+			desc: function (a, b) {
+				return __diacriticHtmlSort(a, b) * -1;
+			}
+		},
+		search: _filterString(true, true)
+	});
+	
+	
 	DataTable.type('date', {
 		className: 'dt-type-date',
-		detect: function ( d )
-		{
-			// V8 tries _very_ hard to make a string passed into `Date.parse()`
-			// valid, so we need to use a regex to restrict date formats. Use a
-			// plug-in for anything other than ISO8601 style strings
-			if ( d && !(d instanceof Date) && ! _re_date.test(d) ) {
-				return null;
+		detect: {
+			allOf: function ( d ) {
+				// V8 tries _very_ hard to make a string passed into `Date.parse()`
+				// valid, so we need to use a regex to restrict date formats. Use a
+				// plug-in for anything other than ISO8601 style strings
+				if ( d && !(d instanceof Date) && ! _re_date.test(d) ) {
+					return null;
+				}
+				var parsed = Date.parse(d);
+				return (parsed !== null && !isNaN(parsed)) || _empty(d);
+			},
+			oneOf: function ( d ) {
+				// At least one entry must be a date or a string with a date
+				return (d instanceof Date) || (typeof d === 'string' && _re_date.test(d));
 			}
-			var parsed = Date.parse(d);
-			return (parsed !== null && !isNaN(parsed)) || _empty(d) ? 'date' : null;
 		},
 		order: {
 			pre: function ( d ) {
@@ -12319,10 +12828,16 @@
 	
 	DataTable.type('html-num-fmt', {
 		className: 'dt-type-numeric',
-		detect: function ( d, settings )
-		{
-			var decimal = settings.oLanguage.sDecimal;
-			return _htmlNumeric( d, decimal, true ) ? 'html-num-fmt' : null;
+		detect: {
+			allOf: function ( d, settings ) {
+				var decimal = settings.oLanguage.sDecimal;
+				return _htmlNumeric( d, decimal, true, false );
+			},
+			oneOf: function (d, settings) {
+				// At least one data point must contain a numeric value
+				var decimal = settings.oLanguage.sDecimal;
+				return _htmlNumeric( d, decimal, true, false );
+			}
 		},
 		order: {
 			pre: function ( d, s ) {
@@ -12336,10 +12851,16 @@
 	
 	DataTable.type('html-num', {
 		className: 'dt-type-numeric',
-		detect: function ( d, settings )
-		{
-			var decimal = settings.oLanguage.sDecimal;
-			return _htmlNumeric( d, decimal ) ? 'html-num' : null;
+		detect: {
+			allOf: function ( d, settings ) {
+				var decimal = settings.oLanguage.sDecimal;
+				return _htmlNumeric( d, decimal, false, true );
+			},
+			oneOf: function (d, settings) {
+				// At least one data point must contain a numeric value
+				var decimal = settings.oLanguage.sDecimal;
+				return _htmlNumeric( d, decimal, false, false );
+			}
 		},
 		order: {
 			pre: function ( d, s ) {
@@ -12353,10 +12874,16 @@
 	
 	DataTable.type('num-fmt', {
 		className: 'dt-type-numeric',
-		detect: function ( d, settings )
-		{
-			var decimal = settings.oLanguage.sDecimal;
-			return _isNumber( d, decimal, true ) ? 'num-fmt' : null;
+		detect: {
+			allOf: function ( d, settings ) {
+				var decimal = settings.oLanguage.sDecimal;
+				return _isNumber( d, decimal, true, true );
+			},
+			oneOf: function (d, settings) {
+				// At least one data point must contain a numeric value
+				var decimal = settings.oLanguage.sDecimal;
+				return _isNumber( d, decimal, true, false );
+			}
 		},
 		order: {
 			pre: function ( d, s ) {
@@ -12369,10 +12896,16 @@
 	
 	DataTable.type('num', {
 		className: 'dt-type-numeric',
-		detect: function ( d, settings )
-		{
-			var decimal = settings.oLanguage.sDecimal;
-			return _isNumber( d, decimal ) ? 'num' : null;
+		detect: {
+			allOf: function ( d, settings ) {
+				var decimal = settings.oLanguage.sDecimal;
+				return _isNumber( d, decimal, false, true );
+			},
+			oneOf: function (d, settings) {
+				// At least one data point must contain a numeric value
+				var decimal = settings.oLanguage.sDecimal;
+				return _isNumber( d, decimal, false, false );
+			}
 		},
 		order: {
 			pre: function (d, s) {
@@ -12456,11 +12989,18 @@
 				// `DT` namespace will allow the event to be removed automatically
 				// on destroy, while the `dt` namespaced event is the one we are
 				// listening for
-				$(settings.nTable).on( 'order.dt.DT', function ( e, ctx, sorting ) {
+				$(settings.nTable).on( 'order.dt.DT column-visibility.dt.DT', function ( e, ctx ) {
 					if ( settings !== ctx ) { // need to check this this is the host
 						return;               // table, not a nested one
 					}
 	
+					var sorting = ctx.sortDetails;
+	
+					if (! sorting) {
+						return;
+					}
+	
+					var i;
 					var orderClasses = classes.order;
 					var columns = ctx.api.columns( cell );
 					var col = settings.aoColumns[columns.flatten()[0]];
@@ -12468,9 +13008,8 @@
 					var ariaType = '';
 					var indexes = columns.indexes();
 					var sortDirs = columns.orderable(true).flatten();
-					var orderedColumns = ',' + sorting.map( function (val) {
-						return val.col;
-					} ).join(',') + ',';
+					var orderedColumns = _pluck(sorting, 'col');
+					var tabIndex = settings.iTabIndex;
 	
 					cell
 						.removeClass(
@@ -12480,10 +13019,18 @@
 						.toggleClass( orderClasses.none, ! orderable )
 						.toggleClass( orderClasses.canAsc, orderable && sortDirs.includes('asc') )
 						.toggleClass( orderClasses.canDesc, orderable && sortDirs.includes('desc') );
+	
+					// Determine if all of the columns that this cell covers are included in the
+					// current ordering
+					var isOrdering = true;
 					
-					var sortIdx = orderedColumns.indexOf( ',' + indexes.toArray().join(',') + ',' );
+					for (i=0; i<indexes.length; i++) {
+						if (! orderedColumns.includes(indexes[i])) {
+							isOrdering = false;
+						}
+					}
 	
-					if ( sortIdx !== -1 ) {
+					if ( isOrdering ) {
 						// Get the ordering direction for the columns under this cell
 						// Note that it is possible for a cell to be asc and desc sorting
 						// (column spanning cells)
@@ -12495,8 +13042,19 @@
 						);
 					}
 	
-					// The ARIA spec says that only one column should be marked with aria-sort
-					if ( sortIdx === 0 ) {
+					// Find the first visible column that has ordering applied to it - it get's
+					// the aria information, as the ARIA spec says that only one column should
+					// be marked with aria-sort
+					var firstVis = -1; // column index
+	
+					for (i=0; i<orderedColumns.length; i++) {
+						if (settings.aoColumns[orderedColumns[i]].bVisible) {
+							firstVis = orderedColumns[i];
+							break;
+						}
+					}
+	
+					if (indexes[0] == firstVis) {
 						var firstSort = sorting[0];
 						var sortOrder = col.asSorting;
 	
@@ -12509,14 +13067,20 @@
 						cell.removeAttr('aria-sort');
 					}
 	
-					cell.attr('aria-label', orderable
-						? col.ariaTitle + ctx.api.i18n('oAria.orderable' + ariaType)
-						: col.ariaTitle
-					);
-	
+					// Make the headers tab-able for keyboard navigation
 					if (orderable) {
-						cell.find('.dt-column-title').attr('role', 'button');
-						cell.attr('tabindex', 0)
+						var orderSpan = cell.find('.dt-column-order');
+						
+						orderSpan
+							.attr('role', 'button')
+							.attr('aria-label', orderable
+								? col.ariaTitle + ctx.api.i18n('oAria.orderable' + ariaType)
+								: col.ariaTitle
+							);
+	
+						if (tabIndex !== -1) {
+							orderSpan.attr('tabindex', tabIndex);
+						}
 					}
 				} );
 			}
@@ -12524,27 +13088,68 @@
 	
 		layout: {
 			_: function ( settings, container, items ) {
+				var classes = settings.oClasses.layout;
 				var row = $('<div/>')
-					.addClass('dt-layout-row')
+					.attr('id', items.id || null)
+					.addClass(items.className || classes.row)
 					.appendTo( container );
 	
-				$.each( items, function (key, val) {
-					var klass = ! val.table ?
-						'dt-'+key+' ' :
-						'';
+				DataTable.ext.renderer.layout._forLayoutRow(items, function (key, val) {
+					if (key === 'id' || key === 'className') {
+						return;
+					}
+	
+					var klass = '';
 	
 					if (val.table) {
-						row.addClass('dt-layout-table');
+						row.addClass(classes.tableRow);
+						klass += classes.tableCell + ' ';
+					}
+	
+					if (key === 'start') {
+						klass += classes.start;
+					}
+					else if (key === 'end') {
+						klass += classes.end;
+					}
+					else {
+						klass += classes.full;
 					}
 	
 					$('<div/>')
 						.attr({
 							id: val.id || null,
-							"class": 'dt-layout-cell '+klass+(val.className || '')
+							"class": val.className
+								? val.className
+								: classes.cell + ' ' + klass
 						})
 						.append( val.contents )
 						.appendTo( row );
-				} );
+				});
+			},
+	
+			// Shared for use by the styling frameworks
+			_forLayoutRow: function (items, fn) {
+				// As we are inserting dom elements, we need start / end in a
+				// specific order, this function is used for sorting the layout
+				// keys.
+				var layoutEnum = function (x) {
+					switch (x) {
+						case '': return 0;
+						case 'start': return 1;
+						case 'end': return 2;
+						default: return 3;
+					}
+				};
+	
+				Object
+					.keys(items)
+					.sort(function (a, b) {
+						return layoutEnum(a) - layoutEnum(b);
+					})
+					.forEach(function (key) {
+						fn(key, items[key]);
+					});
 			}
 		}
 	} );
@@ -12564,6 +13169,25 @@
 		}
 	};
 	
+	function _divProp(el, prop, val) {
+		if (val) {
+			el[prop] = val;
+		}
+	}
+	
+	DataTable.feature.register( 'div', function ( settings, opts ) {
+		var n = $('<div>')[0];
+	
+		if (opts) {
+			_divProp(n, 'className', opts.className);
+			_divProp(n, 'id', opts.id);
+			_divProp(n, 'innerHTML', opts.html);
+			_divProp(n, 'textContent', opts.text);
+		}
+	
+		return n;
+	} );
+	
 	DataTable.feature.register( 'info', function ( settings, opts ) {
 		// For compatibility with the legacy `info` top level option
 		if (! settings.oFeatures.bInfo) {
@@ -12663,6 +13287,7 @@
 	
 		opts = $.extend({
 			placeholder: language.sSearchPlaceholder,
+			processing: false,
 			text: language.sSearch
 		}, opts);
 	
@@ -12706,13 +13331,15 @@
 	
 			/* Now do the filter */
 			if ( val != previousSearch.search ) {
-				previousSearch.search = val;
-	
-				_fnFilterComplete( settings, previousSearch );
-	
-				// Need to redraw, without resorting
-				settings._iDisplayStart = 0;
-				_fnDraw( settings );
+				_fnProcessingRun(settings, opts.processing, function () {
+					previousSearch.search = val;
+			
+					_fnFilterComplete( settings, previousSearch );
+			
+					// Need to redraw, without resorting
+					settings._iDisplayStart = 0;
+					_fnDraw( settings );
+				});
 			}
 		};
 	
@@ -12770,17 +13397,21 @@
 		opts = $.extend({
 			buttons: DataTable.ext.pager.numbers_length,
 			type: settings.sPaginationType,
-			boundaryNumbers: true
+			boundaryNumbers: true,
+			firstLast: true,
+			previousNext: true,
+			numbers: true
 		}, opts);
 	
-		// To be removed in 2.1
-		if (opts.numbers) {
-			opts.buttons = opts.numbers;
-		}
-	
-		var host = $('<div/>').addClass( settings.oClasses.paging.container + ' paging_' + opts.type );
+		var host = $('<div/>')
+			.addClass(settings.oClasses.paging.container + (opts.type ? ' paging_' + opts.type : ''))
+			.append(
+				$('<nav>')
+					.attr('aria-label', 'pagination')
+					.addClass(settings.oClasses.paging.nav)
+			);
 		var draw = function () {
-			_pagingDraw(settings, host, opts);
+			_pagingDraw(settings, host.children(), opts);
 		};
 	
 		settings.aoDrawCallback.push(draw);
@@ -12791,13 +13422,39 @@
 		return host;
 	}, 'p' );
 	
+	/**
+	 * Dynamically create the button type array based on the configuration options.
+	 * This will only happen if the paging type is not defined.
+	 */
+	function _pagingDynamic(opts) {
+		var out = [];
+	
+		if (opts.numbers) {
+			out.push('numbers');
+		}
+	
+		if (opts.previousNext) {
+			out.unshift('previous');
+			out.push('next');
+		}
+	
+		if (opts.firstLast) {
+			out.unshift('first');
+			out.push('last');
+		}
+	
+		return out;
+	}
+	
 	function _pagingDraw(settings, host, opts) {
 		if (! settings._bInitComplete) {
 			return;
 		}
 	
 		var
-			plugin = DataTable.ext.pager[ opts.type ],
+			plugin = opts.type
+				? DataTable.ext.pager[ opts.type ]
+				: _pagingDynamic,
 			aria = settings.oLanguage.oAria.paginate || {},
 			start      = settings._iDisplayStart,
 			len        = settings._iDisplayLength,
@@ -12805,15 +13462,17 @@
 			all        = len === -1,
 			page = all ? 0 : Math.ceil( start / len ),
 			pages = all ? 1 : Math.ceil( visRecords / len ),
-			buttons = plugin()
+			buttons = [],
+			buttonEls = [],
+			buttonsNested = plugin(opts)
 				.map(function (val) {
 					return val === 'numbers'
 						? _pagingNumbers(page, pages, opts.buttons, opts.boundaryNumbers)
 						: val;
-				})
-				.flat();
+				});
 	
-		var buttonEls = [];
+		// .flat() would be better, but not supported in old Safari
+		buttons = buttons.concat.apply(buttons, buttonsNested);
 	
 		for (var i=0 ; i<buttons.length ; i++) {
 			var button = buttons[i];
@@ -12827,14 +13486,24 @@
 				btnInfo.disabled
 			);
 	
+			var ariaLabel = typeof button === 'string'
+				? aria[ button ]
+				: aria.number
+					? aria.number + (button+1)
+					: null;
+	
 			// Common attributes
 			$(btn.clicker).attr({
 				'aria-controls': settings.sTableId,
 				'aria-disabled': btnInfo.disabled ? 'true' : null,
 				'aria-current': btnInfo.active ? 'page' : null,
-				'aria-label': aria[ button ],
+				'aria-label': ariaLabel,
 				'data-dt-idx': button,
-				'tabIndex': btnInfo.disabled ? -1 : settings.iTabIndex,
+				'tabIndex': btnInfo.disabled
+					? -1
+					: settings.iTabIndex && btn.clicker[0].nodeName.toLowerCase() !== 'span'
+						? settings.iTabIndex
+						: null, // `0` doesn't need a tabIndex since it is the default
 			});
 	
 			if (typeof button !== 'number') {
@@ -12866,12 +13535,16 @@
 	
 		// Responsive - check if the buttons are over two lines based on the
 		// height of the buttons and the container.
-		if (
-			buttonEls.length && // any buttons
-			opts.numbers > 1 && // prevent infinite
-			$(host).height() >= ($(buttonEls[0]).outerHeight() * 2) - 10
-		) {
-			_pagingDraw(settings, host, $.extend({}, opts, { numbers: opts.numbers - 2 }));
+		if (buttonEls.length) {
+			var outerHeight = $(buttonEls[0]).outerHeight();
+		
+			if (
+				opts.buttons > 1 && // prevent infinite
+				outerHeight > 0 && // will be 0 if hidden
+				$(host).height() >= (outerHeight * 2) - 10
+			) {
+				_pagingDraw(settings, host, $.extend({}, opts, { buttons: opts.buttons - 2 }));
+			}
 		}
 	}
 	
@@ -12895,7 +13568,6 @@
 		switch ( button ) {
 			case 'ellipsis':
 				o.display = '&#x2026;';
-				o.disabled = true;
 				break;
 	
 			case 'first':
@@ -13073,22 +13745,23 @@
 		}
 	
 		// Wrapper element - use a span as a holder for where the select will go
+		var tmpId = 'tmp-' + (+new Date())
 		var div = $('<div/>')
 			.addClass( classes.container )
 			.append(
-				str.replace( '_MENU_', '<span></span>' )
+				str.replace( '_MENU_', '<span id="'+tmpId+'"></span>' )
 			);
 	
 		// Save text node content for macro updating
 		var textNodes = [];
-		div.find('label')[0].childNodes.forEach(function (el) {
+		Array.prototype.slice.call(div.find('label')[0].childNodes).forEach(function (el) {
 			if (el.nodeType === Node.TEXT_NODE) {
 				textNodes.push({
 					el: el,
 					text: el.textContent
 				});
 			}
-		})
+		});
 	
 		// Update the label text in case it has an entries value
 		var updateEntries = function (len) {
@@ -13099,7 +13772,6 @@
 	
 		// Next, the select itself, along with the options
 		var select = $('<select/>', {
-			'name':          tableId+'_length',
 			'aria-controls': tableId,
 			'class':         classes.select
 		} );
@@ -13119,7 +13791,7 @@
 		__lengthCounter++;
 	
 		// Swap in the select list
-		div.find('span').replaceWith(select);
+		div.find('#' + tmpId).replaceWith(select);
 	
 		// Can't use `select` variable as user might provide their own and the
 		// reference is broken by the use of outerHTML