Help:Sorting: Difference between revisions

Content deleted Content added

Inline

Revision as of 02:08, 1 March 2024

Other languages:

Tables can be made sortable via client-side JavaScript with class="sortable" (in combination with the usual formatting: class="wikitable sortable"). This works in MediaWiki 1.9 and above, which is installed in all Wikimedia projects.

A table that is sortable is identified by arrows to the right of the header in a header cell. A sortable table may be sortable by one or more columns in the table. Clicking an arrow sorts the table rows based on the selected column. Repeated clicking of an arrow changes the sort state in this sequence: Ascending, Descending, Unsorted.

Shift-clicking the arrows of other columns will trigger a secondary sort based on the most recent column on which the shift-click occurred. NB: Shift-clicking capability extends to tertiary and beyond.

Links and other wiki-markup are not possible in headers.

JavaScript

The JavaScript code jquery.tablesorter.js (source) of the tablesorter is loaded by the ResourceLoader. Some sites may have a page MediaWiki:Common.js which adds and overrides some code. Browsers need to support JavaScript and it needs to be enabled for sorting to work.

Sort modes

The way items are sorted depends on the data type of the first rows. To determine the data type, the first 5 non-blank rows below the header are tested after loading the page and the most appropriate format is chosen. Mismatches are possible. The sort order of a column can be forced. See the relevant section farther down.

Tags such as span or sup are ignored when determining data type, but reference numbers and additional visible comments are not ignored today.

Dates

Various date formats are supported, including those with localized month names. On the German Wikipedia, "16. März 2010" is correctly sorted as 2010-03-16

Most other numerical formats are supported as well, including those with different separators (such as . , ' or / ); On English Wikipedias dates are treated as US-Dates (eg. month-day-year) per default.

Numbers

The script can recognize numbers with different decimal separators (. and ,) as well as e/E numbers. However, numbers will be sorted alphanumerically (with 9 sorted after 10) unless this default behaviour is overridden. (See below.)

Text

Text is compared at client-side JavaScript since July 2019 (Commit) with Intl.Collator. This sort accented characters depend on PageContentLanguage correctly. But sort of special characters is depend on Browser implementation. Example for Intl.Collator(de):

Firefox52.9: _-—,;:!?.'"()[]{}§@*/\&#%^+±<=>|~∞¢$£¥€0…9²³aä…eé…ö…ß…ü…z
IE11:      '-—!"#$%&()*,./:;?@[\]^_{|}~¢£¥€+<=>±≤≥§♠0²³9∞aä…eé…ö…ß…ü…z

Only Android systems use the old sort mode with UTF-16 coded characters. Any accented/special characters follow after the basic latin alphabet. This can be changed site wide by posting code like the following inside the MediaWiki:Common.js:

mw.config.set('tableSorterCollation', {'ä':'a', 'ß':'ss', 'þ':'th', 'aa':'å'});

Afterwards, all 'Ä' and 'ä' will be sorted as if they were an 'a' etc. Partial list showing the default order:
! " # $ % & ' ( ) * + , - . / 0 9 : ; < = > ? @ [ \ ] ^ _ ` A Z a z { | } ~ É é —

See: #Basic alphabetic sorting order
See also: MediaWiki:Help:Sorting#Sort order (here capital letters like A–Z are sorted after @)

Forcing the sort mode for a column

The sort mode can be manually specified by putting data-sort-type="…" inside the header of the respective row. This functionality is based on tablesorter.com (webarchive). The following (case-insensitive) values are valid for data-sort-type:

text
number
IPAddress
currency
url
isoDate
usLongDate
date
time

Example:

{|class="wikitable sortable"
!data-sort-type="date"|Date!!Name!!Height!!data-sort-type="number"|Salary
|-
|01.10.1977||Smith||1.85||1,000.000
|-
|11.6.1972||Ray||1.89||900.000
|-
|1.9.1992||Bianchi||1.72||2,000.50
|}

Date	Name	Height	Salary
01.10.1977	Smith	1.85	1,000.000
11.6.1972	Ray	1.89	900.000
1.9.1992	Bianchi	1.72	2,000.50

Specifying a sort key

Sometimes the value of a cell is not correctly parsed or one wants to sort the row in a special way. (e.g. a cell containing 'John Smith' should actually be sorted as 'Smith' and not as 'John') This can be easily achieved by setting the data-sort-value attribute.

Wiki markup:

{|class="wikitable sortable"
!Name and Surname!!Height
|-
|data-sort-value="Smith, John"|John Smith||1.85
|-
|data-sort-value="Ray, Ian"|Ian Ray||1.89
|-
|data-sort-value="Bianchi, Zachary"|Zachary Bianchi||1.72
|}

This gives:

Name and Surname	Height
John Smith	1.85
Ian Ray	1.89
Zachary Bianchi	1.72

Note, however, that this makes use of a new feature in HTML5, which is enabled by default in MediaWiki (including WMF wikis since September 2012 cfr. bugzilla:27478). The old version was to set hidden sort key with w:Template:Sort. See also mediawiki.org.

Controlling sorting and display

If some Text undesired for sorting but needed for display, force the sort mode with data-sort-type="…" and write text after values (e.g. "200 approx", or reference tags "100^[1]"). Empty cell is treated as "-Infinity" when sorting numerically.

In the case of a cell containing a range of dates or numbers (e.g. from 2 to 5), specify a data-sort-value="…".

Examples

The first column demonstrates how plain numbers are detected and sorted as numbers. The second column shows that with data-sort-type="number" in table header more content detected as numbers. The fourth column shows that with data-sort-value="…" a numeric sortvalue is defined, independent of the cell content.

numbers	`data-sort-type="number"`		`data-sort-type="number"`
-8e3	-8 e3		-8 e3
-3e-3	-3 e-3		-3 e-3
2.000	2-5 km²	`data-sort-value="3.5"`	2-5 km²
3.99	3.99 km²		3.99 km²
4	4 km²		4 km²
90 %	90 Percent	`data-sort-value="90"`	about 90 Percent
1E2	100^[1]		100^[1]
1,000,000.0	1 000 000.0	`data-sort-value="1e6"`	one Million

The thousand separator(,) and digits separator(.) depends on language specific configuration of the Mediawiki software. Currency symbols before or after numbers or the %-symbol will be sorted numerical.

currencies
$ 9
$ 80
$ 70
$ 600

currencies
9 €
80 €
70 €
600 €

currencies
£ 9
£ 80
£ 70
£ 600

currencies
¥ 9
¥ 80
¥ 70
¥ 600

percent
9 %
80 %
70 %
600 %

numbers
−7e270
-1.4285714285714E-13
999e9
7e270

Secondary sort key

It is possible to sort by column A (primary sort key), while for equal values in column A, sort by column B (secondary sort key): first sort by A by clicking the sort button of column A once or twice, then, while holding the shift-key, click the sort button of column B once or twice.

Example:

First click on column Text and then, while holding the shift-key, on Numbers, you'll see that the ordering is on Text (1), Numbers (2).

Numbers	Text	Dates	Currency	More text
4	a	01.Jan.2005	4.20	row 1
5	a	05/12/2006	7.15	row 2
1	b	02-02-2004	5.00	row 3
1	a	02-02-2004	5.00	row 4
2	x	13-apr-2005		row 5
2	a	13-apr-2005		row 6
3	a	17.aug.2006	6.50	row 7
3	z	25.aug.2006	2.30	row 8
3	z	28.aug.2006	5.50	row 9
3	z	31.aug.2006	3.77	row 10
3	z	01.sep.2006	1.50	row 11
Bottom

Additional features

Excluding the last row from sorting

Sometimes it is helpful to exclude the last row of a table from the sorting process. This can be achieved by setting class="sortbottom" on the last row. Declaring the last row as a footer (with !) will also exclude it from sorting.

Wiki markup:

{|class="wikitable sortable"
!Name!!Surname!!Height
|-
|John||Smith||1.85
|-
|Ron||Ray||1.89
|-
|Mario||Bianchi||1.72
|- class="sortbottom"
! !!Average:||1.82
|}

What it looks like in your browser:

Name	Surname	Height
John	Smith	1.85
Ron	Ray	1.89
Mario	Bianchi	1.72
	Average:	1.82

Excluding the first row from sorting

The same can be applied for first rows as well, by setting class="sorttop".

Wiki markup:

{|class="wikitable sortable"
!Name!!Surname!!Height
|- class="sorttop"
! !!Average:||1.82
|-
|John||Smith||1.85
|-
|Ron||Ray||1.89
|-
|Mario||Bianchi||1.72
|}

Name	Surname	Height
	Average:	1.82
John	Smith	1.85
Ron	Ray	1.89
Mario	Bianchi	1.72

Making a column unsortable

If you want a specific column not to be sortable, specify class="unsortable" in the attributes of its header cell.

Wiki markup:

{|class="wikitable sortable"
!Numbers!!Alphabet!!Dates!!Currency!!class="unsortable"|Unsortable
|-
|1||Z||02-02-2004||5.00||This
|-
|2||y||13-apr-2005||||Column
|-
|3||X||17.aug.2006||6.50||Is
|-
|4||w||01.Jan.2005||4.20||Unsortable
|-
|5||V||05/12/2006||7.15||See?
|-
!Total: 15!!!!!!Total: 29.55!!
|-
|}

What it looks like in your browser:

Numbers	Alphabet	Dates	Currency	Unsortable
1	Z	02-02-2004	5.00	This
2	y	13-apr-2005		Column
3	X	17.aug.2006	6.50	Is
4	w	01.Jan.2005	4.20	Unsortable
5	V	05/12/2006	7.15	See?
Total: 15			Total: 29.55	Original example

Keeping some rows together

If you want that a row will always be below the row just above it and will follow it around, no matter how the sorting is applied, specify class="expand-child" in the attribute of this row.

Wiki markup:

{| class="wikitable sortable"
! style="width:9em"| Country !!data-sort-type="number"| Area
|-
| France
| 674 843 km²
|- class="expand-child" style="font-size:85%; line-height:1.2; color:gray"
| colspan="2" | In Paris is the Eiffel Tower.
|-
| U.K.
| 242 495 km²
|- class="expand-child" style="font-size:85%; line-height:1.2; color:gray"
| colspan="2" | In the U.K. you cannot pay with euros.
|- class="expand-child" style="font-size:85%; line-height:1.2; color:gray"
| colspan="2" | And you drive on the left side of the road.
|-
| Germany
| 357 168 km² 
|- class="expand-child" style="font-size:85%; line-height:1.2; color:gray"
| colspan="2" | Germany includes the former DDR.
|}

What it looks like in your browser:

Country	Area
France	674 843 km²
In Paris is the Eiffel Tower.
U.K.	242 495 km²
In the U.K. you cannot pay with euros.
And you drive on the left side of the road.
Germany	357 168 km²
Germany includes the former DDR.

If you put in data-sort-value the same content as above row, keep this rows also together. The original mutual order of these rows is preserved. A better way for this is class expand-child, see above #Keeping some rows together.

Example where data-sort-value is used is the case for the rows about the Netherlands:

{|class="wikitable sortable"
!Country/province!!Capital
|-
|France||Paris
|-
|Netherlands||Amsterdam
|-
|data-sort-value=Netherlands|South Holland||data-sort-value=Amsterdam|The Hague
|-
|U.K.||London
|}

Country/province	Capital
France	Paris
Netherlands	Amsterdam
South Holland	The Hague
U.K.	London

Special dates

For years BC we can use, for example, !9937-09-23 for -0062-09-23 (subtract the year number BC from 10000, or the absolute value of the astronomical year from 9999).

If a table column contains any or all incomplete dates, this will not cause sorting problems. If only a year and month are given, that incomplete date is positioned alphabetically before the first day of the month in question. Likewise, if only a year is given, the date is positioned before the first month or day given for that year.

Use of #time

Using parser function #time we can put <span style="display:none">&{{#expr:3e11+{{#time:U|..}}}}</span> in front of the displayed date. This works in the range 1 Jan 111, 00:00:00 through 31 Dec 9999, 23:59:59 for the proleptic Gregorian calendar. The added value makes all values positive and the same length (if scientific format would show up an additional step is needed to prevent this). The "&" forces string sort mode.

Dates and times can be entered in any php date/time format. Note that when we have just a year, a month (typically Jan) must be added in the hidden part.

Example using Help:Sorting/date:

input date

text

date and time as interpreted, with hidden sort key

input with visible sort key

input with hidden sort key

Unix time