From a106c12e5cab54b76516c15c51331b1191fb8db3 Mon Sep 17 00:00:00 2001
From: Derk-Jan Hartman <hartman@videolan.org>
Date: Thu, 25 Apr 2013 17:48:54 +0200
Subject: [PATCH] jquery.tablesorter: Support sortable column headers with
 rowspans

Bug: 38911
Change-Id: I172c3a610b28498334f80a7808663bab7fb0466c
---
 RELEASE-NOTES-1.22                            |  1 +
 resources/jquery/jquery.tablesorter.js        | 36 +++++++++---
 .../jquery/jquery.tablesorter.test.js         | 55 +++++++++++++++++++
 3 files changed, 83 insertions(+), 9 deletions(-)

diff --git a/RELEASE-NOTES-1.22 b/RELEASE-NOTES-1.22
index ab61ad900b..3e12e9253d 100644
--- a/RELEASE-NOTES-1.22
+++ b/RELEASE-NOTES-1.22
@@ -159,6 +159,7 @@ production.
 * Special:Recentchangeslinked will now include upload log entries
 * (bug 41281) Fixed ugly output if file size could not be extracted for multi-page media.
 * (bug 50315) list=logevents API module will now output log entries by anonymous users.
+* (bug 38911) Handle headers with rowspan in jquery.tablesorter
 
 === API changes in 1.22 ===
 * (bug 25553) The JSON output formatter now leaves forward slashes unescaped
diff --git a/resources/jquery/jquery.tablesorter.js b/resources/jquery/jquery.tablesorter.js
index 405c600b76..97357d9be9 100644
--- a/resources/jquery/jquery.tablesorter.js
+++ b/resources/jquery/jquery.tablesorter.js
@@ -289,17 +289,35 @@
 		var maxSeen = 0,
 			longest,
 			realCellIndex = 0,
-			$tableHeaders = $( 'thead:eq(0) > tr', table );
-		if ( $tableHeaders.length > 1 ) {
-			$tableHeaders.each( function () {
-				if ( this.cells.length > maxSeen ) {
-					maxSeen = this.cells.length;
-					longest = this;
+			$tableHeaders = $( [] ),
+			$tableRows = $( 'thead:eq(0) > tr', table );
+		if ( $tableRows.length <= 1 ) {
+			$tableHeaders = $tableRows.children( 'th' );
+		} else {
+			// We need to find the cells of the row containing the most columns
+			var rowspan,
+				i,
+				headersIndex = [];
+			$tableRows.each( function ( rowIndex ) {
+				$.each( this.cells, function( index2, cell ) {
+					rowspan = Number( cell.rowSpan );
+					for ( i = 0; i < rowspan; i++ ) {
+						if ( headersIndex[rowIndex+i] === undefined ) {
+							headersIndex[rowIndex+i] = $( [] );
+						}
+						headersIndex[rowIndex+i].push( cell );
+					}
+				} );
+			} );
+			$.each( headersIndex, function ( index, cellArray ) {
+				if ( cellArray.length >= maxSeen ) {
+					maxSeen = cellArray.length;
+					longest = index;
 				}
-			});
-			$tableHeaders = $( longest );
+			} );
+			$tableHeaders = headersIndex[longest];
 		}
-		$tableHeaders = $tableHeaders.children( 'th' ).each( function ( index ) {
+		$tableHeaders.each( function ( index ) {
 			this.column = realCellIndex;
 
 			var colspan = this.colspan;
diff --git a/tests/qunit/suites/resources/jquery/jquery.tablesorter.test.js b/tests/qunit/suites/resources/jquery/jquery.tablesorter.test.js
index 435346494c..d23bfc3a4d 100644
--- a/tests/qunit/suites/resources/jquery/jquery.tablesorter.test.js
+++ b/tests/qunit/suites/resources/jquery/jquery.tablesorter.test.js
@@ -1082,6 +1082,61 @@
 		);
 	} );
 
+	QUnit.test( 'bug 38911 - The row with the largest amount of columns should receive the sort indicators', 3, function ( assert ) {
+		var $table = $(
+			'<table class="sortable">' +
+				'<thead>' +
+				'<tr><th rowspan="2" id="A1">A1</th><th colspan="2">B2a</th></tr>' +
+				'<tr><th id="B2b">B2b</th><th id="C2b">C2b</th></tr>' +
+				'</thead>' +
+				'<tr><td>A</td><td>Aa</td><td>Ab</td></tr>' +
+				'<tr><td>B</td><td>Ba</td><td>Bb</td></tr>' +
+				'</table>'
+		);
+		$table.tablesorter();
+
+		assert.equal(
+			$table.find( '#A1' ).attr( 'class' ),
+			'headerSort',
+			'The first column of the first row should be sortable'
+		);
+		assert.equal(
+			$table.find( '#B2b' ).attr( 'class' ),
+			'headerSort',
+			'The th element of the 2nd row of the 2nd column should be sortable'
+		);
+		assert.equal(
+			$table.find( '#C2b' ).attr( 'class' ),
+			'headerSort',
+			'The th element of the 2nd row of the 3rd column should be sortable'
+		);
+	} );
+
+	QUnit.test( 'rowspans in table headers should prefer the last row when rows are equal in length', 2, function ( assert ) {
+		var $table = $(
+			'<table class="sortable">' +
+				'<thead>' +
+				'<tr><th rowspan="2" id="A1">A1</th><th>B2a</th></tr>' +
+				'<tr><th id="B2b">B2b</th></tr>' +
+				'</thead>' +
+				'<tr><td>A</td><td>Aa</td></tr>' +
+				'<tr><td>B</td><td>Ba</td></tr>' +
+				'</table>'
+		);
+		$table.tablesorter();
+
+		assert.equal(
+			$table.find( '#A1' ).attr( 'class' ),
+			'headerSort',
+			'The first column of the first row should be sortable'
+		);
+		assert.equal(
+			$table.find( '#B2b' ).attr( 'class' ),
+			'headerSort',
+			'The th element of the 2nd row of the 2nd column should be sortable'
+		);
+	} );
+
 	// bug 41889 - exploding rowspans in more complex cases
 	tableTestHTML(
 		'Rowspan exploding with row headers',
-- 
2.20.1