jquery.tablesorter: Support sortable column headers with rowspans

Bug: 38911
Change-Id: I172c3a610b28498334f80a7808663bab7fb0466c

diff --git a/RELEASE-NOTES-1.22 b/RELEASE-NOTES-1.22
index ab61ad9..3e12e92 100644 (file)
--- 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 405c600..97357d9 100644 (file)
--- 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 4353464..d23bfc3 100644 (file)
--- 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',