TheDJ has uploaded a new change for review.
https://gerrit.wikimedia.org/r/60871
Change subject: Tablesorter: Support sortable column headers with rowspans
......................................................................
Tablesorter: Support sortable column headers with rowspans
Bug 38911
Change-Id: I172c3a610b28498334f80a7808663bab7fb0466c
---
M RELEASE-NOTES-1.22
M resources/jquery/jquery.tablesorter.js
M tests/qunit/suites/resources/jquery/jquery.tablesorter.test.js
3 files changed, 81 insertions(+), 21 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/71/60871/1
diff --git a/RELEASE-NOTES-1.22 b/RELEASE-NOTES-1.22
index bc1d5b7..76b0daf 100644
--- a/RELEASE-NOTES-1.22
+++ b/RELEASE-NOTES-1.22
@@ -53,6 +53,7 @@
* Pager's properly validate which fields are allowed to be sorted on.
* mw.util.tooltipAccessKeyRegexp: The regex now matches "option-" as well.
Support for Mac "option" was added in 1.16, but the regex was never updated.
+* (bug 38911) Handle headers with rowspan in jquery.tablesorter
=== API changes in 1.22 ===
* (bug 46626) xmldoublequote parameter was removed. Because of a bug, the
diff --git a/resources/jquery/jquery.tablesorter.js
b/resources/jquery/jquery.tablesorter.js
index a552237..b943663 100644
--- a/resources/jquery/jquery.tablesorter.js
+++ b/resources/jquery/jquery.tablesorter.js
@@ -289,17 +289,34 @@
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 ) {
+ // We need to find the cells of the row containing the
most columns
+ var rowspan,
+ headersIndex = [];
+ $tableRows.each( function ( index ) {
+ $.each( this.cells, function( index2, cell ) {
+ rowspan = cell.rowSpan ? parseInt(
rowspan, 10 ) : 1;
+ for( i = 0; i < rowspan; i++ ) {
+ if( typeof
headersIndex[index+i] === "undefined" ) {
+ headersIndex[index+i] =
$();
+ }
+ headersIndex[index+i].push(
this );
+ }
+ });
+ });
+ $.each( headersIndex, function ( index, cellArray ) {
+ if ( cellArray.length >= maxSeen ) {
+ maxSeen = cellArray.length;
+ longest = index;
}
});
- $tableHeaders = $( longest );
+ $tableHeaders = headersIndex[longest];
+ } else {
+ $tableHeaders = $tableRows.children('th');
}
- $tableHeaders = $tableHeaders.children( 'th' ).each( function (
index ) {
+ $tableHeaders = $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 1a380a5..d72f11a 100644
--- a/tests/qunit/suites/resources/jquery/jquery.tablesorter.test.js
+++ b/tests/qunit/suites/resources/jquery/jquery.tablesorter.test.js
@@ -325,19 +325,6 @@
$table.find( '.headerSort:eq(0)' ).click();
}
);
- tableTest( 'Sorting with colspanned headers: subsequent column',
- header,
- initial,
- [ aaa1, bbc2, abc3, caa4, aab5 ],
- function ( $table ) {
- // Make colspanned header for test
- $table.find( 'tr:eq(0) th:eq(1), tr:eq(0) th:eq(2)'
).remove();
- $table.find( 'tr:eq(0) th:eq(0)' ).prop( 'colspan', '3'
);
-
- $table.tablesorter();
- $table.find( '.headerSort:eq(1)' ).click();
- }
- );
// Regression tests!
tableTest(
@@ -1010,6 +997,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',
--
To view, visit https://gerrit.wikimedia.org/r/60871
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I172c3a610b28498334f80a7808663bab7fb0466c
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: TheDJ <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
