datatables.net 2.2.2 → 2.3.0

package/js/dataTables.mjs

@@ -1,4 +1,4 @@
-/*! DataTables 2.2.2
+/*! DataTables 2.3.0
  * © SpryMedia Ltd - datatables.net/license
  */
 
@@ -54,15 +54,19 @@ var DataTable = function ( selector, options )
 		var defaults = DataTable.defaults;
 		var $this = $(this);
 		
-		
-		/* Sanity check */
+		// Sanity check
 		if ( this.nodeName.toLowerCase() != 'table' )
 		{
 			_fnLog( null, 0, 'Non-table node initialisation ('+this.nodeName+')', 2 );
 			return;
 		}
 		
-		$(this).trigger( 'options.dt', oInit );
+		// Special case for options
+		if (oInit.on && oInit.on.options) {
+			_fnListener($this, 'options', oInit.on.options);	
+		}
+		
+		$this.trigger( 'options.dt', oInit );
 		
 		/* Backwards compatibility for the defaults */
 		_fnCompatOpts( defaults );
@@ -201,6 +205,9 @@ var DataTable = function ( selector, options )
 			"caption",
 			"layout",
 			"orderDescReverse",
+			"orderIndicators",
+			"orderHandler",
+			"titleRow",
 			"typeDetect",
 			[ "iCookieDuration", "iStateDuration" ], // backwards compat
 			[ "oSearch", "oPreviousSearch" ],
@@ -229,6 +236,13 @@ var DataTable = function ( selector, options )
 		
 		oSettings.rowIdFn = _fnGetObjectDataFn( oInit.rowId );
 		
+		// Add event listeners
+		if (oInit.on) {
+			Object.keys(oInit.on).forEach(function (key) {
+				_fnListener($this, key, oInit.on[key]);
+			});
+		}
+		
 		/* Browser support detection */
 		_fnBrowserDetect( oSettings );
 		
@@ -289,7 +303,7 @@ var DataTable = function ( selector, options )
 		/* HTML5 attribute detection - build an mData object automatically if the
 		 * attributes are found
 		 */
-		var rowOne = $this.children('tbody').find('tr').eq(0);
+		var rowOne = $this.children('tbody').find('tr:first-child').eq(0);
 		
 		if ( rowOne.length ) {
 			var a = function ( cell, name ) {
@@ -447,6 +461,13 @@ var DataTable = function ( selector, options )
  *  @namespace
  */
 DataTable.ext = _ext = {
+	/**
+	 * DataTables build type (expanded by the download builder)
+	 *
+	 *  @type string
+	 */
+	builder: "-source-",
+
 	/**
 	 * Buttons. For use with the Buttons extension for DataTables. This is
 	 * defined here so other extensions can define buttons regardless of load
@@ -459,20 +480,20 @@ DataTable.ext = _ext = {
 
 
 	/**
-	 * Element class names
+	 * ColumnControl buttons and content
 	 *
 	 *  @type object
-	 *  @default {}
 	 */
-	classes: {},
+	ccContent: {},
 
 
 	/**
-	 * DataTables build type (expanded by the download builder)
+	 * Element class names
 	 *
-	 *  @type string
+	 *  @type object
+	 *  @default {}
 	 */
-	builder: "-source-",
+	classes: {},
 
 
 	/**
@@ -1840,6 +1861,22 @@ function _fnCompatOpts ( init )
 		init.scrollX = init.scrollX ? '100%' : '';
 	}
 
+	// Objects for ordering
+	if ( typeof init.bSort === 'object' ) {
+		init.orderIndicators = init.bSort.indicators !== undefined ? init.bSort.indicators : true;
+		init.orderHandler = init.bSort.handler !== undefined ? init.bSort.handler : true;
+		init.bSort = true;
+	}
+	else if (init.bSort === false) {
+		init.orderIndicators = false;
+		init.orderHandler = false;
+	}
+
+	// Which cells are the title cells?
+	if (typeof init.bSortCellsTop === 'boolean') {
+		init.titleRow = init.bSortCellsTop;
+	}
+
 	// Column search objects are in an array, so it needs to be converted
 	// element by element
 	var searchCols = init.aoSearchCols;
@@ -3217,7 +3254,7 @@ function _fnBuildHead( settings, side )
  * @param {*} settings DataTables settings
  * @param {*} source Source layout array
  * @param {*} incColumns What columns should be included
- * @returns Layout array
+ * @returns Layout array in column index order
  */
 function _fnHeaderLayout( settings, source, incColumns )
 {
@@ -3513,10 +3550,9 @@ function _emptyRow ( settings ) {
 	var zero = oLang.sZeroRecords;
 	var dataSrc = _fnDataSource( settings );
 
-	if (
-		(settings.iDraw < 1 && dataSrc === 'ssp') ||
-		(settings.iDraw <= 1 && dataSrc === 'ajax')
-	) {
+	// Make use of the fact that settings.json is only set once the initial data has
+	// been loaded. Show loading when that isn't the case
+	if ((dataSrc === 'ssp' || dataSrc === 'ajax') && ! settings.json) {
 		zero = oLang.sLoadingRecords;
 	}
 	else if ( oLang.sEmptyTable && settings.fnRecordsTotal() === 0 )
@@ -3886,6 +3922,7 @@ function _fnDetectHeader ( settings, thead, write )
 	var rows = $(thead).children('tr');
 	var row, cell;
 	var i, k, l, iLen, shifted, column, colspan, rowspan;
+	var titleRow = settings.titleRow;
 	var isHeader = thead && thead.nodeName.toLowerCase() === 'thead';
 	var layout = [];
 	var unique;
@@ -3914,6 +3951,7 @@ function _fnDetectHeader ( settings, thead, write )
 				cell.nodeName.toUpperCase() == 'TH'
 			) {
 				var cols = [];
+				var jqCell = $(cell);
 
 				// Get the col and rowspan attributes from the DOM and sanitise them
 				colspan = cell.getAttribute('colspan') * 1;
@@ -3934,7 +3972,7 @@ function _fnDetectHeader ( settings, thead, write )
 				if ( write ) {
 					if (unique) {
 						// Allow column options to be set from HTML attributes
-						_fnColumnOptions( settings, shifted, $(cell).data() );
+						_fnColumnOptions( settings, shifted, jqCell.data() );
 						
 						// Get the width for the column. This can be defined from the
 						// width attribute, style attribute or `columns.width` option
@@ -3951,7 +3989,14 @@ function _fnDetectHeader ( settings, thead, write )
 							// Column title handling - can be user set, or read from the DOM
 							// This happens before the render, so the original is still in place
 							if ( columnDef.sTitle !== null && ! columnDef.autoTitle ) {
-								cell.innerHTML = columnDef.sTitle;
+								if (
+									(titleRow === true && i === 0) || // top row
+									(titleRow === false && i === rows.length -1) || // bottom row
+									(titleRow === i) || // specific row
+									(titleRow === null)
+								) {
+									cell.innerHTML = columnDef.sTitle;
+								}
 							}
 
 							if (! columnDef.sTitle && unique) {
@@ -3969,12 +4014,12 @@ function _fnDetectHeader ( settings, thead, write )
 						// Fall back to the aria-label attribute on the table header if no ariaTitle is
 						// provided.
 						if (! columnDef.ariaTitle) {
-							columnDef.ariaTitle = $(cell).attr("aria-label") || columnDef.sTitle;
+							columnDef.ariaTitle = jqCell.attr("aria-label") || columnDef.sTitle;
 						}
 
 						// Column specific class names
 						if ( columnDef.className ) {
-							$(cell).addClass( columnDef.className );
+							jqCell.addClass( columnDef.className );
 						}
 					}
 
@@ -3986,11 +4031,28 @@ function _fnDetectHeader ( settings, thead, write )
 							.appendTo(cell);
 					}
 
-					if ( isHeader && $('span.dt-column-order', cell).length === 0) {
+					if (
+						settings.orderIndicators &&
+						isHeader &&
+						jqCell.filter(':not([data-dt-order=disable])').length !== 0 &&
+						jqCell.parent(':not([data-dt-order=disable])').length !== 0 &&
+						$('span.dt-column-order', cell).length === 0
+					) {
 						$('<span>')
 							.addClass('dt-column-order')
 							.appendTo(cell);
 					}
+
+					// We need to wrap the elements in the header in another element to use flexbox
+					// layout for those elements
+					var headerFooter = isHeader ? 'header' : 'footer';
+
+					if ( $('span.dt-column-' + headerFooter, cell).length === 0) {
+						$('<div>')
+							.addClass('dt-column-' + headerFooter)
+							.append(cell.childNodes)
+							.appendTo(cell);
+					}
 				}
 
 				// If there is col / rowspan, copy the information into the layout grid
@@ -4141,6 +4203,11 @@ function _fnBuildAjax( oSettings, data, fn )
 	// Allow plug-ins and external processes to modify the data
 	_fnCallbackFire( oSettings, null, 'preXhr', [oSettings, data, baseAjax], true );
 
+	// Custom Ajax option to submit the parameters as a JSON string
+	if (baseAjax.submitAs === 'json' && typeof data === 'object') {
+		baseAjax.data = JSON.stringify(data);
+	}
+
 	if ( typeof ajax === 'function' )
 	{
 		// Is a function - let the caller define what needs to be done
@@ -5641,24 +5708,30 @@ function _colGroup( settings ) {
 function _fnSortInit( settings ) {
 	var target = settings.nTHead;
 	var headerRows = target.querySelectorAll('tr');
-	var legacyTop = settings.bSortCellsTop;
+	var titleRow = settings.titleRow;
 	var notSelector = ':not([data-dt-order="disable"]):not([data-dt-order="icon-only"])';
 	
 	// Legacy support for `orderCellsTop`
-	if (legacyTop === true) {
+	if (titleRow === true) {
 		target = headerRows[0];
 	}
-	else if (legacyTop === false) {
+	else if (titleRow === false) {
 		target = headerRows[ headerRows.length - 1 ];
 	}
+	else if (titleRow !== null) {
+		target = headerRows[titleRow];
+	}
+	// else - all rows
 
-	_fnSortAttachListener(
-		settings,
-		target,
-		target === settings.nTHead
-			? 'tr'+notSelector+' th'+notSelector+', tr'+notSelector+' td'+notSelector
-			: 'th'+notSelector+', td'+notSelector
-	);
+	if (settings.orderHandler) {
+		_fnSortAttachListener(
+			settings,
+			target,
+			target === settings.nTHead
+				? 'tr'+notSelector+' th'+notSelector+', tr'+notSelector+' td'+notSelector
+				: 'th'+notSelector+', td'+notSelector
+		);
+	}
 
 	// Need to resolve the user input array into our internal structure
 	var order = [];
@@ -5673,7 +5746,9 @@ function _fnSortAttachListener(settings, node, selector, column, callback) {
 		var run = false;
 		var columns = column === undefined
 			? _fnColumnsFromHeader( e.target )
-			: [column];
+			: Array.isArray(column)
+				? column
+				: [column];
 
 		if ( columns.length ) {
 			for ( var i=0, ien=columns.length ; i<ien ; i++ ) {
@@ -6296,16 +6371,19 @@ function _fnImplementState ( settings, s, callback) {
 
 			// A column name was stored and should be used for restore
 			if (typeof col[0] === 'string') {
+				// Find the name from the current list of column names
 				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;
+				if (idx < 0) {
+					// If the column was not found ignore it and continue
+					return;
+				}
+
+				set[0] = idx;
 			}
 			else if (set[0] >= columns.length) {
-				// If a column name, but it is out of bounds, set to 0
-				set[0] = 0;
+				// If the column index is out of bounds ignore it and continue
+				return;
 			}
 
 			settings.aaSorting.push(set);
@@ -6718,6 +6796,23 @@ function _fnArrayApply(arr, data) {
 	}
 }
 
+/**
+ * Add one or more listeners to the table
+ *
+ * @param {*} that JQ for the table
+ * @param {*} name Event name
+ * @param {*} src Listener(s)
+ */
+function _fnListener(that, name, src) {
+	if (!Array.isArray(src)) {
+		src = [src];
+	}
+
+	for (i=0 ; i<src.length ; i++) {
+		that.on(name + '.dt', src[i]);
+	}
+}
+
 
 
 /**
@@ -7374,12 +7469,24 @@ _api_register( 'table()', function ( selector ) {
 	['footer', 'aoFooter'],
 ].forEach(function (item) {
 	_api_register( 'table().' + item[0] + '.structure()' , function (selector) {
-		var indexes = this.columns(selector).indexes().flatten();
+		var indexes = this.columns(selector).indexes().flatten().toArray();
 		var ctx = this.context[0];
-		
-		return _fnHeaderLayout(ctx, ctx[item[1]], indexes);
-	} );
-})
+		var structure = _fnHeaderLayout(ctx, ctx[item[1]], indexes);
+
+		// The structure is in column index order - but from this method we want the return to be
+		// in the columns() selector API order. In order to do that we need to map from one form
+		// to the other
+		var orderedIndexes = indexes.slice().sort(function (a, b) {
+			return a - b;
+		});
+
+		return structure.map(function (row) {
+			return indexes.map(function (colIdx) {
+				return row[orderedIndexes.indexOf(colIdx)];
+			});
+		});
+	});
+});
 
 
 _api_registerPlural( 'tables().containers()', 'table().container()' , function () {
@@ -7728,7 +7835,7 @@ var _selector_run = function ( type, selector, selectFn, settings, opts )
 {
 	var
 		out = [], res,
-		a, i, ien, j, jen,
+		i, ien,
 		selectorType = typeof selector;
 
 	// Can't just check for isArray here, as an API or jQuery instance might be
@@ -7738,22 +7845,15 @@ var _selector_run = function ( type, selector, selectFn, settings, opts )
 	}
 
 	for ( i=0, ien=selector.length ; i<ien ; i++ ) {
-		// Only split on simple strings - complex expressions will be jQuery selectors
-		a = selector[i] && selector[i].split && ! selector[i].match(/[[(:]/) ?
-			selector[i].split(',') :
-			[ selector[i] ];
+		res = selectFn( typeof selector[i] === 'string' ? selector[i].trim() : selector[i] );
 
-		for ( j=0, jen=a.length ; j<jen ; j++ ) {
-			res = selectFn( typeof a[j] === 'string' ? (a[j]).trim() : a[j] );
-
-			// Remove empty items
-			res = res.filter( function (item) {
-				return item !== null && item !== undefined;
-			});
+		// Remove empty items
+		res = res.filter( function (item) {
+			return item !== null && item !== undefined;
+		});
 
-			if ( res && res.length ) {
-				out = out.concat( res );
-			}
+		if ( res && res.length ) {
+			out = out.concat( res );
 		}
 	}
 
@@ -7782,6 +7882,7 @@ var _selector_opts = function ( opts )
 	}
 
 	return $.extend( {
+		columnOrder: 'implied',
 		search: 'none',
 		order: 'current',
 		page: 'all'
@@ -8543,23 +8644,60 @@ var __columnData = function ( settings, column, r1, r2, rows, type ) {
 
 var __column_header = function ( settings, column, row ) {
 	var header = settings.aoHeader;
-	var target = row !== undefined
-		? row
-		: settings.bSortCellsTop // legacy support
-			? 0
-			: header.length - 1;
+	var titleRow = settings.titleRow;
+	var target = null;
+
+	if (row !== undefined) {
+		target = row;
+	}
+	else if (titleRow === true) { // legacy orderCellsTop support
+		target = 0;
+	}
+	else if (titleRow === false) {
+		target = header.length - 1;
+	}
+	else if (titleRow !== null) {
+		target = titleRow;
+	}
+	else {
+		// Automatic - find the _last_ unique cell from the top that is not empty (last for
+		// backwards compatibility)
+		for (var i=0 ; i<header.length ; i++) {
+			if (header[i][column].unique && $('span.dt-column-title', header[i][column].cell).text()) {
+				target = i;
+			}
+		}
+
+		if (target === null) {
+			target = 0;
+		}
+	}
 
 	return header[target][column].cell;
 };
 
+var __column_header_cells = function (header) {
+	var out = [];
+
+	for (var i=0 ; i<header.length ; i++) {
+		for (var j=0 ; j<header[i].length ; j++) {
+			var cell = header[i][j].cell;
+
+			if (!out.includes(cell)) {
+				out.push(cell);
+			}
+		}
+	}
+
+	return out;
+}
+
 var __column_selector = function ( settings, selector, opts )
 {
 	var
 		columns = settings.aoColumns,
-		names = _pluck( columns, 'sName' ),
-		titles = _pluck( columns, 'sTitle' ),
-		cells = DataTable.util.get('[].[].cell')(settings.aoHeader),
-		nodes = _unique( _flatten([], cells) );
+		names, titles,
+		nodes = __column_header_cells(settings.aoHeader);
 	
 	var run = function ( s ) {
 		var selInt = _intVal( s );
@@ -8631,12 +8769,21 @@ var __column_selector = function ( settings, selector, opts )
 					} );
 
 				case 'name':
+					// Don't get names, unless needed, and only get once if it is
+					if (!names) {
+						names = _pluck( columns, 'sName' );
+					}
+
 					// match by name. `names` is column index complete and in order
 					return names.map( function (name, i) {
 						return name === match[1] ? i : null;
 					} );
 
 				case 'title':
+					if (!titles) {
+						titles = _pluck( columns, 'sTitle' );
+					}
+
 					// match by column title
 					return titles.map( function (title, i) {
 						return title === match[1] ? i : null;
@@ -8675,7 +8822,11 @@ var __column_selector = function ( settings, selector, opts )
 			[];
 	};
 
-	return _selector_run( 'column', selector, run, settings, opts );
+	var selected = _selector_run( 'column', selector, run, settings, opts );
+
+	return opts.columnOrder && opts.columnOrder === 'index'
+		? selected.sort(function (a, b) { return a - b; })
+		: selected; // implied
 };
 
 
@@ -8799,6 +8950,12 @@ _api_registerPlural( 'columns().init()', 'column().init()', function () {
 	}, 1 );
 } );
 
+_api_registerPlural( 'columns().names()', 'column().name()', function () {
+	return this.iterator( 'column', function ( settings, column ) {
+		return settings.aoColumns[column].sName;
+	}, 1 );
+} );
+
 _api_registerPlural( 'columns().nodes()', 'column().nodes()', function () {
 	return this.iterator( 'column-rows', function ( settings, column, i, j, rows ) {
 		return _pluck_order( settings.aoData, rows, 'anCells', column ) ;
@@ -9225,7 +9382,10 @@ _api_register( 'order()', function ( order, dir ) {
 	// otherwise a 2D array was passed in
 
 	return this.iterator( 'table', function ( settings ) {
-		settings.aaSorting = Array.isArray(order) ? order.slice() : order;
+		var resolved = [];
+		_fnSortResolve(settings, resolved, order);
+
+		settings.aaSorting = resolved;
 	} );
 } );
 
@@ -9351,7 +9511,7 @@ _api_register( 'search.fixed()', function ( name, search ) {
 		var fixed = settings.searchFixed;
 
 		if (! name) {
-			return Object.keys(fixed)
+			return Object.keys(fixed);
 		}
 		else if (search === undefined) {
 			return fixed[name];
@@ -9418,10 +9578,10 @@ _api_register([
 			var fixed = settings.aoColumns[colIdx].searchFixed;
 
 			if (! name) {
-				return Object.keys(fixed)
+				return Object.keys(fixed);
 			}
 			else if (search === undefined) {
-				return fixed[name];
+				return fixed[name] || null;
 			}
 			else if (search === null) {
 				delete fixed[name];
@@ -9873,14 +10033,9 @@ _api_register( 'destroy()', function ( remove ) {
 			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();
-		});
-
+		// Clean up the header / footer
+		cleanHeader(thead, 'header');
+		cleanHeader(tfoot, 'footer');
 		settings.colgroup.remove();
 
 		settings.aaSorting = [];
@@ -9902,7 +10057,6 @@ _api_register( 'destroy()', function ( remove ) {
 				orderClasses.isDesc
 			)
 			.css('width', '')
-			.removeAttr('data-dt-column')
 			.removeAttr('aria-sort');
 
 		// Add the TR elements back into the table in their original order
@@ -9983,6 +10137,19 @@ _api_register( 'i18n()', function ( token, def, plural ) {
 		: resolved;
 } );
 
+// Needed for header and footer, so pulled into its own function
+function cleanHeader(node, className) {
+	$(node).find('span.dt-column-order').remove();
+	$(node).find('span.dt-column-title').each(function () {
+		var title = $(this).html();
+		$(this).parent().parent().append(title);
+		$(this).remove();
+	});
+	$(node).find('div.dt-column-' + className).remove();
+
+	$('th, td', node).removeAttr('data-dt-column');
+}
+
 /**
  * Version string for plug-ins to check compatibility. Allowed format is
  * `a.b.c-d` where: a:int, b:int, c:int, d:string(dev|beta|alpha). `d` is used
@@ -9991,7 +10158,7 @@ _api_register( 'i18n()', function ( token, def, plural ) {
  *  @type string
  *  @default Version number
  */
-DataTable.version = "2.2.2";
+DataTable.version = "2.3.0";
 
 /**
  * Private data store, containing all of the settings objects that are
@@ -10598,6 +10765,10 @@ DataTable.defaults = {
 	"bSortCellsTop": null,
 
 
+	/** Specify which row is the title row in the header. Replacement for bSortCellsTop */
+	titleRow: null,
+
+
 	/**
 	 * Enable or disable the addition of the classes `sorting\_1`, `sorting\_2` and
 	 * `sorting\_3` to the columns which are currently being sorted on. This is
@@ -10875,6 +11046,13 @@ DataTable.defaults = {
 			1: "entry"
 		},
 
+		/**
+		 * Page length options
+		 */
+		lengthLabels: {
+			'-1': 'All'
+		},
+
 		/**
 		 * This string is shown in preference to `zeroRecords` when the table is
 		 * empty of data (regardless of filtering). Note that this is an optional
@@ -11145,7 +11323,10 @@ DataTable.defaults = {
 	/**
 	 * For server-side processing - use the data from the DOM for the first draw
 	 */
-	iDeferLoading: null
+	iDeferLoading: null,
+
+	/** Event listeners */
+	on: null
 };
 
 _fnHungarianMap( DataTable.defaults );
@@ -11972,10 +12153,7 @@ DataTable.models.oSettings = {
 
 	/**
 	 * Indicate that if multiple rows are in the header and there is more than
-	 * one unique cell per column, if the top one (true) or bottom one (false)
-	 * should be used for sorting / title by DataTables.
-	 * Note that this parameter will be set by the initialisation routine. To
-	 * set a default use {@link DataTable.defaults}.
+	 * one unique cell per column. Replaced by titleRow
 	 */
 	"bSortCellsTop": null,
 
@@ -12100,7 +12278,19 @@ DataTable.models.oSettings = {
 	resizeObserver: null,
 
 	/** Keep a record of the last size of the container, so we can skip duplicates */
-	containerWidth: -1
+	containerWidth: -1,
+
+	/** Reverse the initial order of the data set on desc ordering */
+	orderDescReverse: null,
+
+	/** Show / hide ordering indicators in headers */
+	orderIndicators: true,
+
+	/** Default ordering listener */
+	orderHandler: true,
+
+	/** Title row indicator */
+	titleRow: null
 };
 
 /**
@@ -12930,7 +13120,7 @@ $.extend( true, DataTable.ext.renderer, {
 				cell.addClass(classes.order.none);
 			}
 
-			var legacyTop = settings.bSortCellsTop;
+			var titleRow = settings.titleRow;
 			var headerRows = cell.closest('thead').find('tr');
 			var rowIdx = cell.parent().index();
 
@@ -12940,11 +13130,10 @@ $.extend( true, DataTable.ext.renderer, {
 				cell.attr('data-dt-order') === 'disable' ||
 				cell.parent().attr('data-dt-order') === 'disable' ||
 
-				// Legacy support for `orderCellsTop`. If it is set, then cells
-				// which are not in the top or bottom row of the header (depending
-				// on the value) do not get the sorting classes applied to them
-				(legacyTop === true && rowIdx !== 0) ||
-				(legacyTop === false && rowIdx !== headerRows.length - 1)
+				// titleRow support, for defining a specific row in the header
+				(titleRow === true && rowIdx !== 0) ||
+				(titleRow === false && rowIdx !== headerRows.length - 1) ||
+				(typeof titleRow === 'number' && rowIdx !== titleRow)
 			) {
 				return;
 			}
@@ -12954,7 +13143,7 @@ $.extend( true, DataTable.ext.renderer, {
 			// `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 column-visibility.dt.DT', function ( e, ctx ) {
+			$(settings.nTable).on( 'order.dt.DT column-visibility.dt.DT', function ( e, ctx, column ) {
 				if ( settings !== ctx ) { // need to check this this is the host
 					return;               // table, not a nested one
 				}
@@ -12965,6 +13154,16 @@ $.extend( true, DataTable.ext.renderer, {
 					return;
 				}
 
+				var orderedColumns = _pluck(sorting, 'col');
+
+				// This handler is only needed on column visibility if the column is part of the
+				// ordering. If it isn't, then we can bail out to save performance. It could be a
+				// separate event handler, but this is a balance between code reuse / size and performance
+				// console.log(e, e.name, column, orderedColumns, orderedColumns.includes(column))
+				if (e.type === 'column-visibility' && ! orderedColumns.includes(column)) {
+					return;
+				}
+
 				var i;
 				var orderClasses = classes.order;
 				var columns = ctx.api.columns( cell );
@@ -12973,8 +13172,8 @@ $.extend( true, DataTable.ext.renderer, {
 				var ariaType = '';
 				var indexes = columns.indexes();
 				var sortDirs = columns.orderable(true).flatten();
-				var orderedColumns = _pluck(sorting, 'col');
 				var tabIndex = settings.iTabIndex;
+				var canOrder = ctx.orderHandler && orderable;
 
 				cell
 					.removeClass(
@@ -12982,8 +13181,8 @@ $.extend( true, DataTable.ext.renderer, {
 						orderClasses.isDesc
 					)
 					.toggleClass( orderClasses.none, ! orderable )
-					.toggleClass( orderClasses.canAsc, orderable && sortDirs.includes('asc') )
-					.toggleClass( orderClasses.canDesc, orderable && sortDirs.includes('desc') );
+					.toggleClass( orderClasses.canAsc, canOrder && sortDirs.includes('asc') )
+					.toggleClass( orderClasses.canDesc, canOrder && sortDirs.includes('desc') );
 
 				// Determine if all of the columns that this cell covers are included in the
 				// current ordering
@@ -13742,12 +13941,17 @@ DataTable.feature.register( 'pageLength', function ( settings, opts ) {
 	} );
 
 	for ( i=0 ; i<lengths.length ; i++ ) {
-		select[0][ i ] = new Option(
-			typeof language[i] === 'number' ?
+		// Attempt to look up the length from the i18n options
+		var label = settings.api.i18n('lengthLabels.' + lengths[i], null);
+
+		if (label === null) {
+			// If not present, fallback to old style
+			label = typeof language[i] === 'number' ?
 				settings.fnFormatNumber( language[i] ) :
-				language[i],
-			lengths[i]
-		);
+				language[i];
+		}
+
+		select[0][ i ] = new Option(label, lengths[i]);
 	}
 
 	// add for and id to label and input