Help:Sortable tables: Difference between revisions

Revision as of 17:45, 7 May 2007

Revision as of 20:27, 1 August 2007

Line 1:

{{H:h}}

[[Help:Table|Tables]] can be made {{mlw|sorting||sortable}} via [[w:client-side JavaScript|client-side JavaScript]] with <code>class="sortable"</code>. This works in MediaWiki 1.9, which is installed in all Wikimedia projects. Sortable tables are 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.

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

Line 6:

==Javascript==

The JavaScript code [http://svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/skins/common/wikibits.js?view=log wikibits.js] has on each site a copy at

<nowiki>{{SERVER}}/skins-1.5/common/wikibits.js</nowiki>, on this site {{SERVER}}/skins-1.5/common/wikibits.js. In addition a site may have a page [[MediaWiki:Common.js]] which adds and overrides some code. The description below is in the process of being adaptedapplies to the version on Meta, {{mlm|MediaWiki:Common.js}}. The sorting code in it can be copied to other sites (by sysops of these other sites).

==SortingSort modes==

The sortingsort modes (the [[w:data type|data type]]s, which, in addition to the choice "ascending" or "descending", determine the sorting order) are: as follows; in the given order (as soon as there is a match, subsequent criteria are not applicable, e.g., 24-12-2007 is a date, not a number. For the criteria, tags (e.g. span, sup, sub) are ignored.

*date (see also below)

*string

**criterion: the first non-blank element is of the form "dd-dd-dddd", "dd-dd-dd", or "dd aaa dddd"; or, in the last case, text follows ending with "sm=d" (without the quotes; it stands for "sort mode = date"). (In hidden form this can conveniently be done with {{tim|smd}}.)

**criterion: the first non-blank element is not of type numeric, date or currency;

**order: the string abcdefghij of length 10 is positioned as ghijdeab, the string abcdefghijk of length 8 as 19ghdeab if gh>=50 (string comparison) and 20ghdeab otherwise (i.e., the assumed format is DD-MM-YYYY or DD-MM-YY), and the string "dd aaa dddd" with aaa an abbreviated month name: chronologically

**order: after conversion of capitals to lowercase the order is [[w:ASCII|ASCII]] - partial list showing the order: !"#$%&'()*+,-./09:;<=>?@[\]^_'az{|}~é&mdash; (see also below; a blank space comes before every other character; an [[w:Non-breaking space|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)

*"currency" (this mode can be useful for other data also)

**criterion: the first non-blank element starts with $, £, €, or ¥; or the element ends with "sm=c" (without the quotes; it stands for "sort mode = currency"). (In hidden form this can conveniently be done with {{tim|smc}}.)

**order: numeric, ignoring these symbols and all ordinary letters and commas, but not spaces; note that scientific notation cannot be used, as e and E are removed

*numeric

**criterion: the first non-blank element consists of just digits, points, commas, spaces, "+", "-", possibly followed by "e" or "E" and a string consisting of "+", "-", digits, possibly followed by "×10" and a string consisting of "+", "-", digits (the latter is for the purpose of using hidden {{mlw|Scientific_notation|E_notation|e-notation}} followed by visible superscript notation of {{mlw|scientific notation||scientific notation}}); or the element ends with "sm=n" (without the quotes; it stands for "sort mode = numeric"). (In hidden form this can conveniently be done with {{tim|smn}}.)

**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 ([http://www.devguru.com/technologies/ecmascript/QuickRef/parsefloat.html parseFloat] is applied) after removing the commas, if any; if it does not (parseFloat returns [[w:NaN|NaN]]), the element is positioned like 0

:::''proposed improvement: ignore spaces in evaluating numbers to determine the sorting order''

:::''proposed internationalisation: in German etc., treat comma as a decimal point''

*string

*date (see also below)

**criterion: all other cases; to avoid one of the other modes, start e.g. with a hidden "&"; this can be done conveniently with {{tim|sms}}, which also allows more hidden text, as sortkey; while the similar templates above are called at the end of a table element, call this one at the start

**criterion: the first non-blank element is of the form "dd-dd-dddd", "dd-dd-dd", or "dd aaa dddd"

**order: after conversion of capitals to lowercase the order is [[w:ASCII|ASCII]] - partial list showing the order: !"#$%&'()*+,-./09:;<=>?@[\]^_'az{|}~é&mdash; (see also below; a blank space comes before every other character; an [[w:Non-breaking space|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)

**order: the string abcdefghij of length 10 is positioned as ghijdeab, the string abcdefghijk of length 8 as 19ghdeab if gh>=50 (string comparison) and 20ghdeab otherwise (i.e., the assumed format is DD-MM-YYYY or DD-MM-YY), and the string "dd aaa dddd" with aaa an abbreviated month name: chronologically

*currency

**criterion: the first non-blank element starts with $, £, €, or ¥

**order: numeric, ignoring all characters except digits and points

The sortingsort mode is determined by the table element that is ''currently'' in the first non-blank row below the header. Thus(To itminimize the deviation from wikibits.js, the code "ns=.." works in the first element below the header instead of in the header.) In the case of different data types within one column (according to the criteria mentioned above) the sort mode may change after sorting, which can give a cycle of four or even more instead of two. This is confusing and gives undesired sorting orders, so that can better be avoided. However, it can be complicated to assess whether an element can ever be at the top after any sorting operations on the same and other columns, and this can also change after deleting a row, or adding a column. Therefore it is wise to make sure that every element matches the criterion for the required data type. Using a {{ml|Help:Table|Row_template|row template}} this can be done very conveniently.

==Examples==

:''Remember that the results depend on fixes and enhancements in [[MediaWiki:Common.js]]; the description applies to the version on Meta. Copies of this help page on other sites are useful for comparison. A sysop can copy the JavaScript-code from Meta.''

Text after a number (e.g. a footnote) does not affect the sorting order, if the sorting ''mode'' is numeric. However, if the number at the top has text after it, this makes the sorting mode alphabetic.

Text after a number (e.g. a footnote) does not affect the sorting order, if the sorting ''mode'' is numeric. However, if the number at the top has text after it, this makes the sorting mode alphabetic, unless it ends with a (typically invisible) "sm=n".

{|

|- style="vertical-align:top;"

|-

|

{|class=sortable

Line 85 ⟶ 86:

|-

|123.4 ghi

|-

|abba

|-

|300,000,000

|-

|2,500,000,000

|-

|jaka

|-

|300,000,000

Line 113 ⟶ 108:

{|

|- style="vertical-align:top;"

|-

|

{|class=sortable

Line 141 ⟶ 136:

{|class=sortable

!currencies

|-

|£ 9

|-

Line 184 ⟶ 180:

|-

|e 600

|}

|

{|class=sortable

!"currency" mode

|-

|9{{smc}}

|-

|circa 80{{smc}}

|-

|7089{{smc}}

|-

|70 90{{smc}}

|-

|70 91{{smc}}

|-

|70 89{{smc}}

|-

|70 to 90{{smc}}

|-

|7091{{smc}}

|-

|600{{smc}}

|}

|

{|class=sortable

!"currency" mode ("ca. 80" sorts at 0 due to dot)

|-

|9{{smc}}

|-

|ca. 80{{smc}}

|-

|7089{{smc}}

|-

|70 to 90{{smc}}

|-

|7091{{smc}}

|-

|600{{smc}}

|}

|}

Line 190 ⟶ 224:

{|

|- style="vertical-align:top;"

|-

|

{|class=sortable

!mixed notations

!numbers with e

|-

| 12 or 13 sm=n

|-

| -12 (retrograde)

|-

| 12 (?)

|-

| ca. 12

|-

| ?

|-

| {{#expr:1000000000000000000/7}}

|-

| 1000000000000000000

|-

| -1000000000000000000

|-

| .0000000000000000001

|-

| -.0000000000000000001

|-

| {{#expr:-1000000000000000000/7}}

|-

| {{#expr:.000000000001/7}}

|-

| {{#expr:-.000000000001/7}}

|-

|89 123 456 788

|-

|89,123,456,789

|-

|333

|-

|1e10

|-

|e 9

Line 216 ⟶ 282:

|-

|7e-270

|-

|4{{e|12}}

|-

| -999e9

|-

| −999e9

|-

| -88e80

Line 240 ⟶ 310:

|-

|e270

|-

|2{{e|12}}

|-

|7{{e|11}}

|-

|6e11

|-

|8e11

|-

|7{{e|-11}}

|-

| -7{{e|11}}

|-

| -7{{e|-11}}

|-

|3{{e|2}}

|-

|4{{e|2}}

|}

|

{|class=sortable

!first number in each element counts

!comparison

|-

|7-4

Line 254 ⟶ 342:

|-

|111

|}

|

{|class=sortable

!percentage

|-

|7%

|-

|2

|-

|4

|-

|22

|-

|111

|}

|

{|class=sortable

!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. TheUsing second{{tim|e}}, a number in scientific notation can be displayed with a superscript, while still allowing numeric sorting (compare the method described in the next section). It examplealso shows that expressions"-" areshould be used, not sorted"−". accordingThe tofirst theirelement evaluated"12 valueor 13 sm=n" has a visible "sm=n", butalthough accordingit tois normally made invisible; when this element is at the firsttop, numbernumeric sorting mode applies.

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

==Alphabetic sorting with hidden sortkey==

If necessary one can apply alphabetic sorting using a sortkey which due to CSS is not displayed:

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 the latter case an invisible "sm=n" needs to be put at the end, in case such an element arrives at the top of a column, which would otherwise cause alphabetic sorting mode.

Sortable version of {{mlw|Table:Climate in Middle East cities}}, using smn to specify numeric sort mode:

{| class="wikitable sortable" style="margin-left:.6em;float:right;"

|-

! style="background: #CCCCCC; color:#000000;border:solid 1px #808080;" |City

! style="background: #99CCCC; color:#000000;border:solid 1px #608080;" |January<br/><span style="font-size:90%;">(Low)</span>

! style="background: #99CCCC; color:#000000;border:solid 1px #608080;" |January<br/><span style="font-size:90%;">(High)</span>

! style="background: #D99898; color:#000000;border:solid 1px #996B6B;" |July<br/><span style="font-size:90%;">(Low)</span>

! style="background: #D99898; color:#000000;border:solid 1px #996B6B;" |July<br/><span style="font-size:90%;">(High)</span>

|-

| style="text-align:center; background: #F2F2F2; color:#000000;font-size:90%;border:solid 1px #808080;padding:.3em;" |[[Amman]]

| style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" |4&deg;C{{smn}}

| style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" |12&deg;C{{smn}}

| style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" |18&deg;C{{smn}}

| style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" |32&deg;C{{smn}}

|-

| style="text-align:center; background: #F2F2F2; color:#000000;font-size:90%;border:solid 1px #808080;padding:.3em;" |[[Baghdad]]

| style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" |0&deg;C{{smn}}

| style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" |16&deg;C{{smn}}

| style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" |24&deg;C{{smn}}

| style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" |43&deg;C{{smn}}

|-

| style="text-align:center; background: #F2F2F2; color:#000000;font-size:90%;border:solid 1px #808080;padding:.3em;" |[[Cairo]]

| style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" |8&deg;C{{smn}}

| style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" |18&deg;C{{smn}}

| style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" |21&deg;C{{smn}}

| style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" |36&deg;C{{smn}}

|-

| style="text-align:center; background: #F2F2F2; color:#000000;font-size:90%;border:solid 1px #808080;padding:.3em;" |[[Damascus]]

| style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" |0&deg;C{{smn}}

| style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" |12&deg;C{{smn}}

| style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" |16&deg;C{{smn}}

| style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" |36&deg;C{{smn}}

|-

| style="text-align:center; background: #F2F2F2; color:#000000;font-size:90%;border:solid 1px #808080;padding:.3em;" |[[Dubai]]

| style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" |15&deg;C{{smn}}

| style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" |23&deg;C{{smn}}

| style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" |30&deg;C{{smn}}

| style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" |39&deg;C{{smn}}

|-

| style="text-align:center; background: #F2F2F2; color:#000000;font-size:90%;border:solid 1px #808080;padding:.3em;" |[[Jerusalem]]

| style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" |5&deg;C{{smn}}

| style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" |13&deg;C{{smn}}

| style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" |17&deg;C{{smn}}

| style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" |31&deg;C{{smn}}

|-

| style="text-align:center; background: #F2F2F2; color:#000000;font-size:90%;border:solid 1px #808080;padding:.3em;" |[[Riyadh]]

| style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" |8&deg;C{{smn}}

| style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" |21&deg;C{{smn}}

| style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" |26&deg;C{{smn}}

| style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" |42&deg;C{{smn}}

|-

| style="text-align:center; background: #F2F2F2; color:#000000;font-size:90%;border:solid 1px #808080;padding:.3em;" |[[Tehran]]

| style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" |-3&deg;C{{smn}}

| style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" |7&deg;C{{smn}}

| style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" |22&deg;C{{smn}}

| style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" |37&deg;C{{smn}}

|}

== 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 using <code>class="sortbottom"</code> on the desired table row (line starting with <code>|-</code>).

'''Wiki markup'''

<nowiki>{|</nowiki>class="wikitable sortable"

<nowiki>!</nowiki>Name!!Surname!!Height

<nowiki>|-</nowiki>

<nowiki>|</nowiki>John||Smith||1.85

<nowiki>|-</nowiki>

<nowiki>|</nowiki>Ron||Ray||1.89

<nowiki>|-</nowiki>

<nowiki>|</nowiki>Mario||Bianchi||1.72

<nowiki>|-</nowiki><b style="color:red">class="sortbottom"</b>

<nowiki>|</nowiki>||Average:||1.82

<nowiki>|}</nowiki>

'''What it looks like in your browser'''

{|class="wikitable sortable"

!Name!!Surname!!Height

|-

|John||Smith||1.85

|-

|Ron||Ray||1.89

|-

|Mario||Bianchi||1.72

|-class="sortbottom"

|||Average:||1.82

|}

==== Issues ====

Please note that only one row can be marked with <code>class="sortbottom"</code>. Doing otherwise results in the marked rows being sorted with each other, which usually is not the intended behavior.

{|class="wikitable sortable"

|+''Wrong - using more than one "sortbottom"''

!Name!!Surname!!Height

|-

|John||Smith||1.85

|-

|Ron||Ray||1.89

|-class="sortbottom"

|||Average:||1.82

|-class="sortbottom"

!Name!!Surname!!Height

|}

=== Making a column unsortable ===

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

'''Wiki markup'''

<nowiki>{|</nowiki>class="wikitable sortable"

<nowiki>!</nowiki>Numbers!!Alphabet!!Dates!!Currency!!<b style="color:red">class="unsortable"|</b>Unsortable

<nowiki>|-</nowiki>

<nowiki>|</nowiki>1||Z||02-02-2004||5.00||This

<nowiki>|-</nowiki>

<nowiki>|</nowiki>2||y||13-apr-2005||||Column

<nowiki>|-</nowiki>

<nowiki>|</nowiki>3||X||17.aug.2006||6.50||Is

<nowiki>|-</nowiki>

<nowiki>|</nowiki>4||w||01.Jan.2005||4.20||Unsortable

<nowiki>|-</nowiki>

<nowiki>|</nowiki>5||V||05/12/2006||7.15||See?

<nowiki>|-</nowiki>class="sortbottom"

<nowiki>!</nowiki>Total: 15!!!!!!Total: 29.55!!

<nowiki>|-</nowiki>

<nowiki>|}</nowiki>

'''What it looks like in your browser'''

{|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?

|-class="sortbottom"

!Total: 15!!!!!!Total: 29.55!![http://www.joostdevalk.nl/code/sortable-table/ Original example]

|-

|}

==Sorting with hidden sortkey==

If necessary one can apply sorting using a sortkey which [[Help:Cascading_style_sheets#Non-display|due to CSS is not displayed]]:

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

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

Javascript sorting is based on the text inside and outside the tags, without the tags themselves. TheA hidden sortkey comescan be put at the start. andBoth is separated fromin the displayedcase textof inalphabetic suchand athat wayof thatnumeric sorting the latterfirst doesparts not affectdetermine the sorting order. For example,the ifpurpose of a hidden sortkey systemfor isnumeric usedsorting, wherethe therecriterion arefor nothe blankitem spacesat inthe anytop sortkey, thenbeing a blanknumber spacehas canbeen beadapted: usedignoring forspan separation.and Ifsup atags, singleit blankcan spacebe ''is''a possiblenumber infollowed aby sortkey,"×10" twoand nbspsan canexponent be(use used.the Forsame tablecross elementssign). forThis whichformat theis texte.g. toproduced beby displayed{{tim|e}}. isA equalhidden tosortkey thefor sortkey,alphabetic nosorting duplicationdoes isnot needed,have ofsuch courserestrictions.

==Alphabetic sorting with hidden sortkey==

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.

Line 312 ⟶ 598:

===Alphabetic sortkey for numeric sorting===

Numeric sort mode can be forced with {{tim|smn}} (see above). Numbers preceded with text are sorted like 0; to avoid that the text can be preceded by a hidden copy of the number.

In some cases it is not possible to use numeric sorting mode:

*the numbers are preceded by some text other than a currency symbol

*some elements in a column, possibly also the first, are not numbers

InIf thisfor casesome reason one may wantwants to use alphabetic sort mode for numbers, one can construct a hidden alphabetic sortkey for numericthis sortingpurpose. This can be done for all numbers between -1e100 and 1e100 in arbitrary precision 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

Line 352 ⟶ 636:

|<tt><span>e09 1</span> 1e9 </tt>||<span style="display:none">e09 1</span> 1e9 || 1e9

|-

|<tt><span>&&&&&&&&&+0 ec89 9.999,99 </span> 9.999,99e-10</tt>||<span style="display:none">&{{sms|&&&&&&&&+0 ec89 9.999,99 </span>}} 9.999,99e-10|| 9.999,99e-10

|-

|<tt><span>&&&&&&&&&+</span>0.000,000,001 </tt>||<span style="display:none">&&&&&&&&&+</span>0.000,000,001 || 0.000,000,001

Line 381 ⟶ 665:

|-

|

{|class="wikitable sortable"

|-

!Date sortingsort mode

|-

|07 Apr 2007

|-

|16 Apr 2007

|-

|16 Mar 2007

|-

|05-04-2007

|-

|04-05-2007

|-

|18 Mar 2007

Line 398 ⟶ 688:

|}

|

{|class="wikitable sortable"

|-

!Date sort mode

|-

|07 Apr 2007 - 2 May 2007{{smd}}

|-

|16 Apr 2007

|-

|16 Mar 2007

|-

|05-04-2007

|-

|04-05-2007

|-

|18 Mar 2007

|-

|27 Mar 2007

|-

|20 Aug 2006

|-

|22 Jul 2006

|}

|-

|

{|class="wikitable sortable"

|-

!Date sort mode, sorting works for no preference and preference dmy

!Date sorting mode

|-

|07 Apr 2007

|-

|<span style="display:none">00 Jan </span>2007

|-

|<span style="display:none">00</span> Mar 2007

|-

|16 Apr 2007

|-

|28 Feb 2007

|-

|[[28 Feb]] [[2007]]

|-

|28 Jan 2007

|-

|[[28 Jan]] [[2007]]

|-

|[[07 Apr]] [[2007]]

Line 410 ⟶ 736:

|[[16 Apr]] [[2007]]

|-

|[[181 Mar]] [[2007]]

|-

|[[01 Mar]] [[2007]]

|-

|[[27 Mar]] [[2007]]

Line 418 ⟶ 746:

|[[22 Jul]] [[2006]]

|-

|181 Mar 2007

|-

|01 Mar 2007

|-

|27 Mar 2007

Line 427 ⟶ 757:

|}

|}

{|

<div style="float: right">

|'''Example:String sort mode''' ''([{{fullurl:{{FULLPAGENAME}}|action=edit&section=13}} edit] to view source)''

{|class="wikitable sortable"

!date

|-

Line 440 ⟶ 770:

| <span style="display:none">2006-12 </span>[[December]] [[2006]]

|-

| <span style="display:none">!9936-04 </span>[[April]] [[-63|64 BC]]

|-

| <span style="display:none">!9900-07-13</span>[[-0099-07-13]]

Line 456 ⟶ 786:

| {{dts1|2005-05-15}}

|}

|'''Date sort mode'''

</div>

{|class="wikitable sortable"

For dates the sorting mode is based on the ''rendered'' date format (in the case of links: the labels, not the targets). To use the date sorting feature as well as [[Help:Date formatting and linking|Mediawiki's date-formatting feature]], we need to use in the wikitext the format <nowiki>[[dd mmm]] [[yyyy]]</nowiki> and either no preference or preference dmy, or use <nowiki>[[mmm dd]] [[yyyy]]</nowiki> and preference dmy. Otherwise the sorting mode is "string" or "numeric"; in the case of "string", only dates formated as <code>YYYY-MM-DD</code> will result in true chronological sorting.

!date

|-

| <span style="display:none">00-00-</span>[[2006]]

|-

| [[03 Dec]] [[2006]]

|-

| [[27 Mar]] [[0000]]

|-

| <span style="display:none">22 Mar 0000</span>[[27 Mar]] [[1 BC]]{{smd}}

|-

| <span style="display:none">00</span> [[December|Dec]] [[2006]]

|-

| <span style="display:none">00 Apr !936 </span>[[April|Apr]] [[64 BC]]{{smd}}

|-

| <span style="display:none">13 Jul !900</span>[[13 Jul]] [[100 BC]]{{smd}}

|-

| <span style="display:none">23 Sep !937</span>[[23 Sep]] [[63 BC]]{{smd}}

|-

| <span style="display:none">08 Oct !937</span>[[08 Oct]] [[63 BC]]{{smd}}

|-

| <span style="display:none">21 Dec !998</span>[[21 Dec]] [[2 BC]]{{smd}}

|-

| [[08 Nov]] [[2006]]

|-

| [[31 Dec]] [[0304]]

|-

| [[15 May]] [[2005]]

|}

|}

The sort mode is based on the ''rendered'' format; in the case of links: the labels, not the targets (though including any content hidden by "display:none").

'''Date sort mode''':

One of the formats allowed for the date sort mode is produced by the [[Help:Date formatting and linking|Mediawiki's date-formatting feature]] in the right combination of preference and wikitext format: we need to use in the wikitext the format <nowiki>[[dd mmm]] [[yyyy]]</nowiki> (done in the example) and either no preference or preference dmy, or use with preference dmy one of the formats <nowiki>[[mmm dd]][[yyyy]], [[yyyy]][[mmm dd]], or [[yyyy]][[dd mmm]]</nowiki>.

Incomplete dates:

*<nowiki><span style="display:none">00 Jan </span>2007</nowiki>

*<nowiki><span style="display:none">00</span> Mar 2007</nowiki>

'''String sort mode''':

String sort mode provides chronological sorting for dates formated as <nowiki><span style="display:none">&</span></nowiki>YYYY-MM-DD; the hidden "&" avoids numeric sort mode.

However, like aboveAlso we can put a sortkey in front which, due to CSS, is not displayed. With a hidden sortkey one can simply usehide the non-wikilinked format <code>YYYY-MM-DD</code> forand years ADput followedafter bythat any choice of displayable text, including Mediawiki date formatting. The Wikipedia template {{tiw|dts}} provides a convenient way of applying this method while using the date-formatting feature for display.

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

Line 470 ⟶ 842:

*{{tiw|dts}}

*[[bugzilla:8226]].

==Secondary sortkey==

If a column contains a value multiple times then sorting the column preserves the order of the rows within each subset that has the same value in that column ({{mlw|Sorting_algorithm|Stability|stable sorting}}). Thus sorting based on a primary, secondary, tertiary, etc. sortkey can be done by sorting the least-significant sortkey first, etc.

'''First click on column Alphabet and then on Numbers, you'll see that the ordering is on Numbers (1), Alphabet (2).'''

{|class="wikitable sortable"

!Numbers!!Alphabet!!Dates!!Currency!!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||17.aug.2006||6.50||row 8

|-class="sortbottom"

!Bottom!!!!!!!!!!!!

|-

|}

==Limitations==

Javascript sorting may not work properly on tables with cells extending over multiple rows and/or columns. Also, while cells can be empty, they should not be ''missing'' at the end of a row. In somethese cases sometimes the table gets messed up when attempting to sort, inwhile other casestimes some of the sorting buttons work while others don't.

==Controlling sorting and display==

Text undesired for sorting but needed for display:

*In numeric sorting mode, this text (e.g. footnotes) needs to be put after the number, and an invisible "sm=n" after that. See e.g. [[Help:Sorting/countries]].

*In date sorting mode, this text needs to be put in a separate column; in the case of a cell containing a range of dates or numbers (e.g. from .. to ..), text in surplus of what is required for sorting is put in the extra column. If the first part of the text is used for sorting, then the extra column needs to be the following one; conversely, if the last part of the text is used for sorting, then the extra column needs to be the previous one; depending on the table format, this dividing of an item over two cells may look ugly.

*In alphabetic sorting, any footnotes etc. do not require a separate column; they can simply be put at the end of the element.

Text undesired for display but needed for sorting:

*can be put as hidden text in the column to be sorted

Combining the two, we can have displayed text independent of text used for sorting, by fully hiding the latter, and fully putting the former in a separate column (in date sorting mode and numeric sorting mode) or in the same column after the hidden text (in alphabetic sorting). Fully putting the displayed text in a separate column may look ugly if it is not done consistently for a whole column, but only for elements that require this (e.g. if most entries in a column are single numbers, but some are ranges).

==Sorting the wikitext of a table==

Line 621 ⟶ 1,032:

==See also==

*{{ml|Help:Collapsing|Sortable_collapsible_table|Sortable collapsible table}}

*{{tiw|dts}} - sorting a table by a date column, while following [[w:Wikipedia:Manual_of_Style_%28dates_and_numbers%29#Dates_containing_a_month_and_a_day]] for display

*{{tim|sd}} - shows buggy date sorting when some or all dates are linked

*[[Help:Table]]

*[http://svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/skins/common/wikibits.js?view=log wikibits.js] - contains, among other things, the sorting code

**for revision history see also [http://svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/skins/common/sorttable.js?view=log&pathrev=19698 sorttable.js]

**{{mlm|MediaWiki:Common.js}} page overriding function ts_parseFloat(num) and function ts_resortTable(lnk) on Meta with an improved version (can be done on other sites too)versions

**{{mlw|MediaWiki:Common.js}} page overriding function ts_parseFloat(num)

**[[sv:MediaWiki:Common.js]] page overriding function ts_parseFloat(num); adaptation to decimal comma

*[[bugzilla:2001]] - resolved feature request

*[[bugzilla:8063]] - request to enable sorting of numbers with a point as thousands separator