6aa59fd5cc50b89052ce6a5b8b1112ceb9d999cb Fix: When columns are hidden…

… and ordering, they should still have the header classes applied to indicate ordering.

https://datatables.net/forums/discussion/79453

dd2fa24bf1b1cadf911521f34ac1f9dc1a1d66bf Merge branch 'master' of github.com:DataTables/DataTablesSrc

Sync to source repo @dd2fa24bf1b1cadf911521f34ac1f9dc1a1d66bf

datatables.json

@@ -11,5 +11,5 @@
     ],
     "src-repo": "http://github.com/DataTables/DataTablesSrc",
     "last-tag": "2.1.0",
-    "last-sync": "4a816880efa39bb7867dab8495e8971d1f4b8893"
+    "last-sync": "dd2fa24bf1b1cadf911521f34ac1f9dc1a1d66bf"
 }

js/dataTables.js

@@ -12729,6 +12729,7 @@
 						return;               // table, not a nested one
 					}
 
+					var i;
 					var orderClasses = classes.order;
 					var columns = ctx.api.columns( cell );
 					var col = settings.aoColumns[columns.flatten()[0]];
@@ -12737,14 +12738,7 @@
 					var indexes = columns.indexes();
 					var sortDirs = columns.orderable(true).flatten();
 					var sorting = ctx.sortDetails;
-					var orderedColumns = ',' + sorting
-						.filter( function (sort) {
-							// Filter to just the visible columns
-							return ctx.aoColumns[sort.col].bVisible;
-						} )
-						.map( function (sort) {
-							return sort.col;
-						} ).join(',') + ',';
+					var orderedColumns = _pluck(sorting, 'col');
 
 					cell
 						.removeClass(
@@ -12755,10 +12749,17 @@
 						.toggleClass( orderClasses.canAsc, orderable && sortDirs.includes('asc') )
 						.toggleClass( orderClasses.canDesc, orderable && sortDirs.includes('desc') );
 
-					// Get the index of this cell in the sort array
-					var sortIdx = orderedColumns.indexOf( ',' + indexes.toArray().join(',') + ',' );
+					// Determine if all of the columns that this cell covers are included in the
+					// current ordering
+					var isOrdering = true;
+
+					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)
@@ -12770,8 +12771,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;
 
@@ -12789,6 +12801,7 @@
 						: col.ariaTitle
 					);
 
+					// Make the headers tab-able for keyboard navigation
 					if (orderable) {
 						cell.find('.dt-column-title').attr('role', 'button');
 						cell.attr('tabindex', 0)

js/dataTables.mjs

@@ -12676,6 +12676,7 @@ $.extend( true, DataTable.ext.renderer, {
 					return;               // table, not a nested one
 				}
 
+				var i;
 				var orderClasses = classes.order;
 				var columns = ctx.api.columns( cell );
 				var col = settings.aoColumns[columns.flatten()[0]];
@@ -12684,14 +12685,7 @@ $.extend( true, DataTable.ext.renderer, {
 				var indexes = columns.indexes();
 				var sortDirs = columns.orderable(true).flatten();
 				var sorting = ctx.sortDetails;
-				var orderedColumns = ',' + sorting
-					.filter( function (sort) {
-						// Filter to just the visible columns
-						return ctx.aoColumns[sort.col].bVisible;
-					} )
-					.map( function (sort) {
-						return sort.col;
-					} ).join(',') + ',';
+				var orderedColumns = _pluck(sorting, 'col');
 
 				cell
 					.removeClass(
@@ -12702,10 +12696,17 @@ $.extend( true, DataTable.ext.renderer, {
 					.toggleClass( orderClasses.canAsc, orderable && sortDirs.includes('asc') )
 					.toggleClass( orderClasses.canDesc, orderable && sortDirs.includes('desc') );
 
-				// Get the index of this cell in the sort array
-				var sortIdx = orderedColumns.indexOf( ',' + indexes.toArray().join(',') + ',' );
+				// Determine if all of the columns that this cell covers are included in the
+				// current ordering
+				var isOrdering = true;
+
+				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)
@@ -12717,8 +12718,19 @@ $.extend( true, DataTable.ext.renderer, {
 					);
 				}
 
-				// 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;
 
@@ -12736,6 +12748,7 @@ $.extend( true, DataTable.ext.renderer, {
 					: col.ariaTitle
 				);
 
+				// Make the headers tab-able for keyboard navigation
 				if (orderable) {
 					cell.find('.dt-column-title').attr('role', 'button');
 					cell.attr('tabindex', 0)