datatables.net 2.1.7 → 2.2.0

package/js/dataTables.js

@@ -1,25 +1,7 @@
-/*! DataTables 2.1.7
+/*! DataTables 2.2.0
  * © SpryMedia Ltd - datatables.net/license
  */
 
-/**
- * @summary     DataTables
- * @description Paginate, search and order HTML tables
- * @version     2.1.7
- * @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";
 
@@ -429,7 +411,6 @@
 				thead = $('<thead/>').appendTo($this);
 			}
 			oSettings.nTHead = thead[0];
-			$('tr', thead).addClass(oClasses.thead.row);
 			
 			var tbody = $this.children('tbody');
 			if ( tbody.length === 0 ) {
@@ -444,7 +425,6 @@
 				tfoot = $('<tfoot/>').appendTo($this);
 			}
 			oSettings.nTFoot = tfoot[0];
-			$('tr', tfoot).addClass(oClasses.tfoot.row);
 			
 			// Copy the data index array
 			oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
@@ -2161,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);
+			}
 		}
 	}
 	
@@ -3228,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 );
@@ -3242,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 () {
@@ -4510,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);
 		}
 	}
 	
@@ -5238,8 +5225,11 @@
 			// [].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=0 ; i<settings.aiDisplay.length ; i++) {
+			for (i=start ; i<start + settings.aiDisplay.length ; i++) {
 				var idx = settings.aiDisplay[i];
 				var tr = settings.aoData[idx].nTr;
 	
@@ -5254,7 +5244,7 @@
 					return {
 						idx: _fnVisibleToColumnIndex(settings, vis),
 						width: $(this).outerWidth()
-					}
+					};
 				});
 	
 				// Check against what the colgroup > col is set to and correct if needed
@@ -5264,6 +5254,10 @@
 	
 					if (colWidth !== colSizes[i].width) {
 						colEl.style.width = colSizes[i].width + 'px';
+	
+						if (scroll.sX) {
+							colEl.style.minWidth = colSizes[i].width + 'px';
+						}
 					}
 				}
 			}
@@ -5413,6 +5407,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,
@@ -5522,15 +5518,52 @@
 		}
 	
 		if ( (tableWidthAttr || scrollX) && ! settings._reszEvt ) {
-			var bindResize = function () {
-				$(window).on('resize.DT-'+settings.sInstance, DataTable.util.throttle( function () {
-					if (! settings.bDestroying) {
-						_fnAdjustColumnSizing( settings );
+			var wrapperWidth = function () {
+				return $(settings.nTableWrapper).is(':visible')
+					? $(settings.nTableWrapper).width()
+					: 0;
+			}
+	
+			settings.containerWidth = wrapperWidth();
+	
+			var resize = DataTable.util.throttle( function () {
+				var newWidth = wrapperWidth();
+	
+				// Don't do it if destroying, is the same size as last time, or the container
+				// width is 0
+				if (
+					! settings.bDestroying &&
+					settings.containerWidth !== newWidth &&
+					newWidth !== 0
+				) {
+					// Do a resize
+					_fnAdjustColumnSizing( settings );
+					settings.containerWidth = newWidth;
+				}
+			} );
+	
+			// For browsers that support it (~2020 onwards for wide support) we can watch for the
+			// container changing width.
+			if (window.ResizeObserver) {
+				settings.resizeObserver = new ResizeObserver(function (e) {
+					var box = e[0].contentBoxSize;
+					var size = Array.isArray(box)
+						? box[0].inlineSize // Spec
+						: box.inlineSize; // Old Firefox
+	
+					// Under this condition a resize will trigger its own resize, causing an error.
+					if (size < settings.containerWidth) {
+						return;
 					}
-				} ) );
-			};
 	
-			bindResize();
+					resize();
+				});
+				settings.resizeObserver.observe(settings.nTableWrapper);
+			}
+			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;
 		}
@@ -6144,15 +6177,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])
 				};
@@ -6200,6 +6244,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
@@ -6229,13 +6275,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 );
 	
@@ -6269,10 +6308,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);
 			} );
 		}
 	
@@ -6283,30 +6335,64 @@
 	
 		// 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({});
 					}
 				}
+			}
 	
-				// Search
-				if ( col.search !== undefined ) {
-					$.extend( settings.aoPreSearchCols[i], col.search );
+			// 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 );
+					}
+				}
+	
+				// 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();
 			}
 		}
 	
@@ -6624,6 +6710,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]);
+			}
+		}
+	}
+	
 	
 	
 	/**
@@ -6816,18 +6926,7 @@
 			: settings;
 	
 		// Initial data
-		if ( data ) {
-			// Chrome can throw a max stack error if apply is called with
-			// too large an array, but apply is faster.
-			if (data.length < 10000) {
-				this.push.apply(this, data);
-			}
-			else {
-				for (i=0 ; i<data.length ; i++) {
-					this.push(data[i]);
-				}
-			}
-		}
+		_fnArrayApply(this, data);
 	
 		// selector
 		this.selector = {
@@ -7208,7 +7307,7 @@
 			selector.forEach(function (sel) {
 				var inner = __table_selector(sel, a);
 	
-				result.push.apply(result, inner);
+				_fnArrayApply(result, inner);
 			});
 	
 			return result.filter( function (item) {
@@ -8062,7 +8161,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;
 	} );
@@ -8575,7 +8674,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;
@@ -9394,6 +9496,10 @@
 		} );
 	} );
 	
+	// Can be assigned in DateTable.use() - note luxon and moment vars are in helpers.js
+	var __bootstrap;
+	var __foundation;
+	
 	/**
 	 * Set the libraries that DataTables uses, or the global objects.
 	 * Note that the arguments can be either way around (legacy support)
@@ -9427,6 +9533,14 @@
 				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;
 			}
@@ -9436,7 +9550,7 @@
 		if (type === 'lib' || type === 'jq' || (module && module.fn && module.fn.jquery)) {
 			$ = module;
 		}
-		else if (type == 'win' || (module && module.document)) {
+		else if (type === 'win' || (module && module.document)) {
 			window = module;
 			document = module.document;
 		}
@@ -9449,6 +9563,14 @@
 		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;
+		}
 	}
 	
 	/**
@@ -9739,6 +9861,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
@@ -9857,7 +9984,7 @@
 	 *  @type string
 	 *  @default Version number
 	 */
-	DataTable.version = "2.1.7";
+	DataTable.version = "2.2.0";
 	
 	/**
 	 * Private data store, containing all of the settings objects that are
@@ -11960,7 +12087,13 @@
 		deferLoading: null,
 	
 		/** Allow auto type detection */
-		typeDetect: true
+		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: 0
 	};
 	
 	/**
@@ -12102,8 +12235,8 @@
 	
 	
 	var __mlWarning = false;
-	var __luxon; // Can be assigned in DateTeble.use()
-	var __moment; // Can be assigned in DateTeble.use()
+	var __luxon; // Can be assigned in DateTable.use()
+	var __moment; // Can be assigned in DateTable.use()
 	
 	/**
 	 * 
@@ -12139,7 +12272,7 @@
 				return null;
 			}
 	
-			dt.setLocale(locale);
+			dt = dt.setLocale(locale);
 		}
 		else if (! format) {
 			// No format given, must be ISO
@@ -12182,7 +12315,7 @@
 	
 			// 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!
@@ -12522,6 +12655,13 @@
 		});
 	}
 	
+	var __diacriticHtmlSort = function (a, b) {
+		a = _stripHtml(a);
+		b = _stripHtml(b);
+	
+		return __diacriticSort(a, b);
+	}
+	
 	//
 	// Built in data types
 	//
@@ -12592,6 +12732,31 @@
 	});
 	
 	
+	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: {
@@ -12802,6 +12967,7 @@
 					var indexes = columns.indexes();
 					var sortDirs = columns.orderable(true).flatten();
 					var orderedColumns = _pluck(sorting, 'col');
+					var tabIndex = settings.iTabIndex;
 	
 					cell
 						.removeClass(
@@ -12866,8 +13032,13 @@
 	
 					// 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');
+	
+						if (tabIndex !== -1) {
+							orderSpan.attr('tabindex', tabIndex);
+						}
 					}
 				} );
 			}
@@ -12881,7 +13052,7 @@
 					.addClass(items.className || classes.row)
 					.appendTo( container );
 	
-				$.each( items, function (key, val) {
+				DataTable.ext.renderer.layout._forLayoutRow(items, function (key, val) {
 					if (key === 'id' || key === 'className') {
 						return;
 					}
@@ -12912,7 +13083,31 @@
 						})
 						.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]);
+					});
 			}
 		}
 	} );
@@ -13264,7 +13459,7 @@
 				'data-dt-idx': button,
 				'tabIndex': btnInfo.disabled
 					? -1
-					: settings.iTabIndex
+					: settings.iTabIndex && btn.clicker[0].nodeName.toLowerCase() !== 'span'
 						? settings.iTabIndex
 						: null, // `0` doesn't need a tabIndex since it is the default
 			});
@@ -13298,12 +13493,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.buttons > 1 && // prevent infinite
-			$(host).height() >= ($(buttonEls[0]).outerHeight() * 2) - 10
-		) {
-			_pagingDraw(settings, host, $.extend({}, opts, { buttons: opts.buttons - 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 }));
+			}
 		}
 	}
 	
@@ -13327,7 +13526,6 @@
 		switch ( button ) {
 			case 'ellipsis':
 				o.display = '&#x2026;';
-				o.disabled = true;
 				break;
 	
 			case 'first':
@@ -13514,7 +13712,7 @@
 	
 		// Save text node content for macro updating
 		var textNodes = [];
-		Array.from(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,
@@ -13532,7 +13730,6 @@
 	
 		// Next, the select itself, along with the options
 		var select = $('<select/>', {
-			'name':          tableId+'_length',
 			'aria-controls': tableId,
 			'class':         classes.select
 		} );