Help:Sorting

Tables can be made sortable via JavaScript with class="sortable". This works in Mediawiki 1.9 installed on all Mediawiki projects. The table gets 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.

Note that all of the below is subject to change due to improvements in the script.

Sorting modes

The sorting modes (the data types, which, in addition to the choice "ascending" or "descending", determine the sorting order) are:

• string
  • criterion: the first element is not of type numeric, date or currency; also if the first element is blank, this sorting mode is used
  • order: after conversion of capitals to lowercase the order is ASCII - partial list showing the order: !"#$%&'()*+,-./09:;<=>?@[\]^_'az{|}~é— (see also below; a blank space comes before every other character; an nbsp code counts as a space; two adjacent ordinary blank spaces count as one; for multiple blank spaces one can use nbsps or alternate nbsps and ordinary blank spaces)
    • the sorting order of the characters possibly occurring in strings representing numbers is: +,-.0123456789Ee—
• numeric
  • criterion: the first element consists of just digits, or digits and a decimal point; not recognized as numeric are:
    • negative numbers (!)
    • numbers with thousands separators, e.g. commas or spaces
    • numbers in scientific notation
  • order: if the string starts with a number (where spaces and nbsp's at the start are ignored) the order is numeric according to the first number in the string (parsefloat is applied); if it does not, the element is positioned like 0; negative numbers and numbers in scientific notation are properly sorted (if, as said, the first element is not like that), but numbers with comma or space separators are not: they are sorted like the number before the first comma or space
• date (see also below)
  • criterion: the first element is of the form dd-dd-dddd or dd-dd-dd
  • order: the string abcdefghij of length 10 is positioned as ghijdeab, the string abcdefghijk of any other length as 19ghdeab if gh>=50 (string comparison) and 20ghdeab otherwise (i.e., the assumed format is DD-MM-YYYY or DD-MM-YY)
• currency

The sorting mode is determined by the table element that is currently in the first row below the header. Thus it may change after sorting, which can give a cycle of four or even more instead of two.

The most versatile is alphabetic sorting using a sortkey which due to CSS is not displayed:

<span style="display:none">...</span>

Javascript sorting is based on the text inside and outside the tags, without the tags themselves. The sortkey comes at the start and is separated from the displayed text in such a way that the latter does not affect the sorting order. For example, if a sortkey system is used where there are no blank spaces in any sortkey, then a blank space can be used for separation. If a single blank space is possible in a sortkey, two nbsps can be used. For table elements for which the text to be displayed is equal to the sortkey, no duplication is needed, of course.

If the text inside and outside the tags together is of a form that would cause a sorting mode other than alphabetic (if and when the element is at the top), a character can be appended at the end of the sortkey to avoid this, again making sure it does not affect the sorting order by putting a space or two nbsps. This can be dispensed with if the element can never be at the top, but this can be complicated to assess as that can be caused by sorting other columns, with varying sorting modes, and it can change when deleting a row, adding a column, etc.

Instead of "display=none" another way is using a font color equal to the background, e.g. <font color="#f9f9f9">999</font> gives "999". With this method the hidden code can be seen in selected text (e.g. with the mouse). Also the hidden text is included when copying the rendered text. The first may be an advantage or a disadvantage, the second seems only a disadvantage. A complication is also that if a user uses a background color different from the default, the specified text color may not match it; to make sure they are the same the background color can be specified also.

Making variable-length numbers with thousands separators sortable

If a column consist of non-negative numbers, of which those >= 1000 have thousands separators, alphabetic sorting can be made to correspond with numeric sorting by leading "&nbsp;" codes which render as blank spaces (or with leading zeros) to equalize the number of characters before the explicit or implicit decimal separator. (However, this does not seem to work in all browsers: it works in IE, but reportedly not in Firefox.)

However, if at any time a number less than 1000 would be at the top, the sorting mode would be numeric, even with leading "&nbsp;" codes. Hence subsequent sorting would not work properly due to the thousands separators. One possible workaround is to force alphabetic sorting mode, by writing either all numbers, or just those in the range 0 - 1000, with a "+" in front. If all numbers get a plus, the absolute position of the plus has to be a non-increasing function of the number, e.g. the pluses are in the same absolute position, or in the same position relative to the first digit. If only the numbers in the range 0 - 1000 get a plus, the position of the first non-space character (plus or digit) has to be a non-increasing function of the number, so if there is a number in the range 1000 - 10000, pluses should be at most at the fifth position from the right to preserve the sorting order (+ 999 comes before 1,000).

Within a column, either all or no numbers in the range 0 - 1 should have a zero before the decimal point.

In the case where the width of a number is not fixed or not known, as in the case where the number depends on parameters or templates, and/or is the result of a computation, an automatic way of padding with nbsps is needed. This can be done with Template:Lsc11 which also provides thousands separators, and the pluses necessary in the range 0 - 1000 (see above).

We cannot use variable padleft with the nbsp code, because &, the first character of the code, is used for padding, even if the code is put in a template.

Padding with zeros

Example:

• 000156

Formatnum can be combined with padleft:

Integer:

{{formatnum:{{padleft:299792458|16|0}}}} gives:

• 0,000,000,299,792,458

Real:

{{formatnum:{{padleft:{{#expr:((299792458.056 - .5) round 0)}}|16|0}}}}.{{padleft:{{#expr:(1000000*(299792458.056 - ((299792458.056 - .5) round 0))) round 0}}|6|0}} gives:

• 0,000,000,299,792,458.056000

Corresponding alphabetic and numeric sorting

Alphabetic and numeric sorting can be made to correspond for all numbers as follows:

• where scientific notation is used, it is normalized such that the absolute value of the mantissa is between 1 and 10; the exponent is put first
• scientific notation is used for all negative numbers, and all positive numbers outside some interval (below: 1e-9 to 1e9), and not inside that interval
• where the absolute value of the exponent and/or the mantissa is a decreasing function of the number, the notation uses its complement with respect to 99 for exponents and 10 for mantissas; the code "c" is added in these cases
• spaces and nbsps are added where needed

For readibility a plain notation can be added after the coded form. If a blank space is used for separation, and no number code has a space at this position, then adding the plain notation does not affect the sorting order. If a number code can have a space at this position, two nbsps can be used. Moreover, display of the first part, acting as sortkey, can be avoided using CSS (this does not affect its functioning for sorting):

<span style="display:none">...</span>

(However, on some projects, notably Ontoworld, a page with this wikitext cannot be saved, as spam protection.)

In the following the left column shows the code for alphabetic sorting, where cryptic followed by the regular notation. The second column contains the same (hence sorting the same), but with code hidden with CSS. The third column shows the corresponding plain numbers, equal to what the second column shows, except that commas have been removed to allow numeric sorting mode. Thus this column also provides numeric sorting, this time using numeric sorting mode, but only when the first element is detected as numeric, i.e., when it is a non-negative number which is not in scientific notation. As a result sorting toggles between ascending numeric and descending alphabetic order.

full code for alphabetic sorting	display form	plain number
+6	+6	6
+7	+7	7
1,048,576	1,048,576	1048576
1,234	1,234	1234
+123	+123	123
16,777,216	16,777,216	16777216
65,536	65,536	65536
67,108,864	67,108,864	67108864
1,048,576	1,048,576	1048576
e23 6 6e23	e23 6 6e23	6e23
e09 1 1e9	e09 1 1e9	1e9
+0 ec89 9.999,99 9.999,99e-10	+0 ec89 9.999,99 9.999,99e-10	9.99999e-10
+0.000,000,001	+0.000,000,001	1e-9
+0 ec87 5 6e-12	+0 ec87 5 6e-12	6e-12
+0 ec86 5 7e-13	+0 ec86 5 7e-13	7e-13
+0 ec87 5 5e-12	+0 ec87 5 5e-12	5e-12
-e-10 c0.000,01 -9.999,99e-10	-e-10 c0.000,01 -9.999,99e-10	-9.99999e-10
-e-08 c6.8 -3.2e-8	-e-08 c6.8 -3.2e-8	-3.2e-8
-ec86 c0.3 -9.7e13	-ec86 c0.3 -9.7e13	-9.7e13
-ec99 c7.7 -2.3	-ec99 c7.7 -2.3	-2.3
999,999,999.999,99	999,999,999.999,99	999999999.99999
+0	+0	0
+0.3	+0.3	0.3

If no scientific notation is used then alternatively, if a column contains only a few negative numbers we can preserve the correspondence between alphabetic and numeric order by putting the minuses at the position of the right-most plus sign in the column, and inserting a number of nbsp codes after the minus sign, the closer to zero the more.

A column of plain numbers (not in scientific notation), partly negative, sorts as follows:

• if the first number is non-negative, sorting alternates between ascending numeric order and descending alphabetic order
• if the first number is negative, sorting first gives ascending alphabetic order, and then alternates again between ascending numeric order and descending alphabetic order (starting with the latter)

Dates

For dates the sorting mode is based on the rendered date format. Unfortunately none of the standard formats for the date formatting feature matches either of the formats giving sorting mode "date". Thus if dates are entered in one of these standard formats the sorting mode is "string"; only for format YYYY-MM-DD string sorting corresponds to chronological sorting.

However, like above we can put a sortkey in front which due to CSS is not displayed. As sortkey we can simply use the unlinked format YYYY-MM-DD for years AD. For years BC we can use e.g. !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 also, or only, incomplete dates this does not give complications: if only a year and month are given this incomplete date is positioned alphabetically before the first day of the month concerned. If only a year is given the date is positioned before the first day of the year concerned.

If at some point (i.e., after possible previous sorting) the form [[YYYY]] is at the top with a non-negative year, sorting would be numerical; in this case, after toggling between ascending and descending there would be no proper sorting within each year (because parsefloat is applied, finding the first number in the string, and basing sorting on that only). Also years BC would not be sorted properly. Therefore alphabetic sorting has to be enforced. This can be done by putting a non-displayed character after the year, separated by a space.

Example:

date
2006 a
3 December 2006
27 March 0000
2006-12 December 2006
!9936-04 April 64 BC
!9900-07-13-0099-07-13
!9937-09-23-0062-09-23
!9937-10-08-0062-10-08
!9998-12-21-0001-12-21
8 November 2006
31 December 0304
15 May 2005

Examples

• w:Ranked list of Dutch provinces
• w:List of countries by GDP estimates for 2006 (nominal)
• w:List of countries by GDP (PPP), 2006
• w:List of longest reigning current monarchs - date columns are sortable for people with "no preference" for date formatting, and for people with preference [[YYYY-MM-DD]].
• Pokémon table - prefixes numbers with "#" to have them before "-".

Limitations

Javascript sorting may not work properly on tables with cells extending over multiple rows and/or columns.

Sorting the wikitext of a table

Unfortunately it does not seem possible to directly and automatically sort the wikitext itself, according to one of the sortkeys. This would, after saving, directly produce a table sorted as required.

However, if for a given table, we make an auxiliary sortable table rendering as wikitext for the original table, we can sort the wikitext of the original table.

Example:

Original table:

demo
9
12
11

Auxiliary table:

{|class="sortable" style="width:100%"
!demo

header
|- | 9
|- |12
|- |11

|}

After copying the rendered text to the edit box, and deleting the header line, this renders as:

demo
9
11
12

Alphabetic sorting order

demo
!
"
#
$
%
&
'
(
)
*
+
,
-
.
/
0
9
:
;
<
=
>
?
@
[
\
]
^
_
'
A
Z
a
z
A1
Z1
a1
z1
{
|
}
~
—
É
é
É1
é1

The two-character entries such as A1 demonstrate that A and a are at the same position.

See also

• Help:Table
• bugzilla:2001 - resolved feature request
• bugzilla:8063 - request to enable sorting of numbers with a point as thousands separator
• bugzilla:8115
• http://www.kryogenix.org/code/browser/sorttable/ - explanation of the original version of the code by Stuart Langridge; an improvement in the MediaWiki version is that tables no longer need to have an id.
• http://blog.webkist.com/archives/000043.html

Links to other help pages

Help contents

Meta · Wikinews · Wikipedia · Wikiquote · Wiktionary · Commons: · Wikidata · MediaWiki · Wikibooks · Wikisource · MediaWiki: Manual · Google

Versions of this help page (for other languages see further)

What links here on Meta or from Meta · Wikipedia · MediaWiki

Reading

Go · Search · Namespace · Page name · Section · Backlinks · Redirect · Category · Image page · Special pages · Printable version

Tracking changes

Recent changes (enhanced) | Related changes · Watching pages · Diff · Page history · Edit summary · User contributions · Minor edit · Patrolled edit

Logging in and preferences

Logging in · Preferences

Editing

Starting a new page · Advanced editing · Editing FAQ · Export · Import · Shortcuts · Edit conflict · Page size

Referencing

Links · URL · Interwiki linking · Footnotes

Style and formatting

Wikitext examples · CSS · Reference card · HTML in wikitext · Formula · Lists · Table · Sorting · Colors · Images and file uploads

Fixing mistakes

Show preview · Reverting edits

Advanced functioning

Expansion · Template · Advanced templates · Parser function · Parameter default · Magic words · System message · Substitution · Array · Calculation · Transclusion

Others

Special characters · Renaming (moving) a page · Preparing a page for translation · Talk page · Signatures · Sandbox · Legal issues for editors