Help:Sorting: Difference between revisions

Content deleted Content added

Inline

Revision as of 21:00, 30 June 2011

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 sortable table is identified by the arrows in each of its header cells. Clicking them will cause the table rows to sort based on the selected column, in ascending order first, and subsequently toggling between ascending and descending order. 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.

Sort modes

The way items are sorted depends on the data type of the item currently in the first row. To determine the data type, multiple cells are tested and the most appropriate format is chosen. Mismatches are possible, but can be easily corrected by manually specifying data-sort-type inside the header of the respective row:

{|class="wikitable sortable"
! data-sort-type="date" | Date!!Name!!Height
|-
|01.10.1977||Smith||1.85
|-
|11.6.1972||Ray||1.89
|-
|1.9.1992||Bianchi||1.72
|}

The following (case-insensitive) values are valid for data-sort-type:

text
number
IPAdress
currency
url
isoDate
usLongDate
date
time

Tags such as span or sup are ignored when determining data type.

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-05-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.

Text

Text is sorted in ASCII order (Any accented/special characters follow after the basic latin alphabet). This can be changed site wide by posting code like the following inside the common.js:

mw.config.set('tableSorterCollation', {'ä':'ae', 'ö' : 'oe', 'ß': 'ss', 'ü':'ue'});

Afterwards, all 'ä' will be sorted as if they were an ae etc. Partial list showing the default order: !"#$%&'()*+,-./09:;<=>?@[\]^_'az{|}~é—

Examples

numbers



-
4.0
15
10
1 2
1 aa
1 a b
1 aa
1 11
1 1 a
1 1
1
192
123,456.789
123,456,789
2,500,000,000
300,000,000
3,000,000 abc
5,000,000
2,000 def
-4,000
aaa
-9,999
4,000
9,999
800,000
900,000

numbers
123 564,589.7e12
9
-80
80 abc 5
abc 80
70
600

first alphabetic, later also numeric mode
123.4 ghi
2,500,000,000
300,000,000
3,000,000 abc
5,000,000
2,000 def
4,000
9,999
800,000
900,000

currencies
$ 9
$ 80
$ 70
$ 600

currencies
€ 9
€ 80
€ 70
€ 600

currencies
£ 9
£ 80
£ 70
£ 600

currencies
¥ 9
¥ 80
¥ 70
¥ 600

comparison
a 9
a 80
a 70
a 600

comparison
e 9
e 80
e 70
e 600

The example with "a" gives alphabetic sorting; that with "e" ditto, the data are not mistaken for numbers in scientific format.

mixed notations
1.4285714285714E+17
1000000000000000000
-1000000000000000000
.0000000000000000001
-.0000000000000000001
-1.4285714285714E+17
1.4285714285714E-13
-1.4285714285714E-13
89 123 456 788
89,123,456,789
333
1e10
e 9
e 80
e 70
e 600
999e9
88e80
7e270
999e-9
88e-80
7e-270
-999e9
−999e9
-88e80
-7e270
-999e-9
-88e-80
-7e-270
e3
-e3
1e3
e9
e80
e270
6e11
8e11

first number in each element counts
7-4
2
4
22/7
111

percentage
7%
2
4
22
111

mixed notations
14
-14
11
-12 (retrograde)
12 or 13
12 (?)
ca. 12
12 (approx.)
?

The first example demonstrates that text is positioned at zero, and that e.g. e3 for 1000 is not allowed; use 1e3 instead. It also shows that "-" should be used, not "−".

The second example shows that expressions are not sorted according to their evaluated value, but according to the first number.

The third example shows that a percentage is accepted for numeric sorting mode, but ignored in the actual sorting, so if a column contains percentages, all numbers have to be written as a percentage.

The fourth example shows again that "ca. 12" sorts at 0, as opposed to 12 with some text after it, which sorts at 12. In case such an element arrives at the top of a column, it causes alphabetic sorting mode.

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 declaring the last row as a footer

Wiki markup

{|class="wikitable sortable"
!Name!!Surname!!Height
|-
|John||Smith||1.85
|-
|Ron||Ray||1.89
|-
|Mario||Bianchi||1.72
|-
! !!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 declaring them as header using the same exclamation mark notation.

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

Correcting a wrongly parsed cell

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 Doe' should actually be sorted as 'Doe' and not as 'John')

This can be easily achieved by manually setting

data-sort-value

Wiki markup

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

What it looks like in your browser

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

Keeping some rows together

data-sort-value can be used to keep certain rows together. The original mutual order of these rows is preserved.

Example where this is the case for the rows about the Netherlands:

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 sortkey

input with visible sortkey

input with hidden sortkey

Unix time