Help:Sorting: Difference between revisions

From Meta, a Wikimedia project coordination wiki
Browse history interactively
← Older edit
Content deleted Content added
VisualWikitext
{{MovedToMediaWiki|Help:Sortable tables}}
 
(439 intermediate revisions by more than 100 users not shown)
Line 1: Line 1:
{{MovedToMediaWiki|Help:Sortable tables}}
{{H:h}}
[[Help:Table|Tables]] can be made 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.

==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 adapted 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).

==Sorting modes==
The sorting modes (the [[w:data type|data type]]s, which, in addition to the choice "ascending" or "descending", determine the sorting order) are:
*string
**criterion: the first non-blank element is not of type numeric, date or currency;
**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)
*numeric
**criterion: the first non-blank element consists of just digits, points, commas, spaces, +, -, possibly followed by e or E and digits
**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''
*date (see also below)
**criterion: the first non-blank element is of the form "dd-dd-dddd", "dd-dd-dd", or "dd aaa dddd"
**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 sorting mode is determined by the table element that is ''currently'' in the first non-blank row below the header. Thus it may change after sorting, which can give a cycle of four or even more instead of two.

==Examples==
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.

{|
|-
|
{|class=sortable
!numbers with thousands separators
|-
|123.4
|-
|2,500,000,000
|-
|300,000,000
|-
|3,000,000 abc
|-
|5,000,000
|-
|2,000 def
|-
| -4,000
|-
| ghi
|-
| -9,999
|-
|4,000
|-
|9,999
|-
|800,000
|-
|900,000
|}
|
{|class=sortable
!numbers with thousands separators
|-
|123.4
|-
|2,500,000,000
|-
|300,000,000
|-
|3,000,000 abc
|-
|5,000,000
|-
|2,000 def
|-
|4,000
|-
|ghi 9,999
|-
|800,000
|-
|900,000
|}
|
{|class=sortable
!numbers with thousands separators
|-
|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
|}
|}

{|
|-
|
{|class=sortable
!currency demo
|-
|$ 9
|-
|$ 80
|-
|$ 70
|-
|$ 600
|}
|
{|class=sortable
!currency demo
|-
|€ 9
|-
|€ 80
|-
|€ 70
|-
|€ 600
|}
|
{|class=sortable
!currency demo
|-
|£ 9
|-
|£ 80
|-
|£ 70
|-
|£ 600
|}
|
{|class=sortable
!currency demo
|-
|¥ 9
|-
|¥ 80
|-
|¥ 70
|-
|¥ 600
|}
|
{|class=sortable
!comparison
|-
|a 9
|-
|a 80
|-
|a 70
|-
|a 600
|}
|
{|class=sortable
!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.

{|
|-
|
{|class=sortable
!numbers with e
|-
|333
|-
|e 9
|-
|e 80
|-
|e 70
|-
|e 600
|-
|999e9
|-
|88e80
|-
|7e270
|-
|999e-9
|-
|88e-80
|-
|7e-270
|-
| -999e9
|-
| -88e80
|-
| -7e270
|-
| -999e-9
|-
| -88e-80
|-
| -7e-270
|-
|e3
|-
| -e3
|-
|1e3
|-
|e9
|-
|e80
|-
|e270
|}
|
{|class=sortable
!comparison
|-
|7-4
|-
|2
|-
|4
|-
|22/7
|-
|111
|}
|}

The first example demonstrates that text is positioned at zero, and that e.g. e3 for 1000 is not allowed, use 1e3 instead. 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:
:<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. 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. <nowiki><font color="#f9f9f9">999</font></nowiki> gives "<font color="#f9f9f9">999</font>". 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.

===Unsuitability of padding with no-break spaces===
The effect of left-padding with [[w:Non-breaking space|"&amp;nbsp;" codes]], which render as blank spaces, depends on the browser: in IE they are (unlike actual blank spaces) counted for sorting as leading blank spaces, so in a list of numbers with text (for which the alphabetic sorting mode applies) they could be used to equalize the number of characters before the explicit or implicit decimal separator. However, in Firefox they are ignored for the purpose of sorting.

{|class="wikitable sortable"
!Sorting using nbsps, works on IE but not on Firefox
!Name
|-
|100.3 FM
|Third
|-
|&nbsp;89.5 FM
|First
|-
|107.3 FM
|Fourth
|-
|&nbsp;95.3 FM
|Second
|}

See also [[w:Talk:List_of_U.S._states_by_population#Sortable_Table]].

===Padding with zeros===
Example:
*{{padleft:{{#expr:12*13}}|6|0}}

Formatnum can be combined with padleft:

Integer:

<nowiki>{{formatnum:{{padleft:299792458|16|0}}}}</nowiki> gives:

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

Real:

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

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

===Alphabetic sortkey for numeric sorting===
In some cases it is not possible to use numeric sorting:
*the numbers are predeced by some text other than a currency symbol
*some elements in a column, possibly also the first, are not numbers

In this case one may want to construct a hidden alphabetic sortkey for numeric sorting. 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
*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
*numbers 0 &le; ''x'' < 1000 get a "+" in front
*positive numbers in scientific notation with a negative exponent get "+0" in front
*spaces and nbsps are added where needed:
**for numbers not in scientific notation the positions of all explicit and implicit decimal points are aligned
**for the starting position, i.e. the position of the first "-", "+", or "e", of other numbers, see the example table

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 with thousands separators, equal to what the second column shows. 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.

{|class="wikitable sortable"
|-
!full code for alphabetic sorting!! display form !!plain number with thousands separators
|-
|<tt>{{lsc11amp|6|}} </tt>||{{lsc11amp|6}} || 6
|-
|<tt>{{lsc11amp|7|}} </tt>||{{lsc11amp|7}} || 7
|-
|<tt>{{lsc11amp|{{pow|4|10|}}|}} </tt>||{{lsc11amp|{{pow|4|10|}}}} || {{formatnum:{{pow|4|10|}}}}
|-
|<tt>{{lsc11amp|1234|}} </tt>|||{{lsc11amp|1234}} || 1,234
|-
|<tt>{{lsc11amp|123|}} </tt>||{{lsc11amp|123}} || 123
|-
|<tt>{{lsc11amp|{{pow|4|12|}}|}} </tt>||{{lsc11amp|{{pow|4|12|}}}} || {{formatnum:{{pow|4|12|}}}}
|-
|<tt>{{lsc11amp|{{pow|4|8|}}|}} </tt>||{{lsc11amp|{{pow|4|8|}}}} || {{formatnum:{{pow|4|8|}}}}
|-
|<tt>{{lsc11amp|{{pow|4|13|}}|}} </tt>||{{lsc11amp|{{pow|4|13|}}}} || {{formatnum:{{pow|4|13|}}}}
|-
|<tt><span>e23 6</span> 6e23 </tt>||<span style="display:none">e23 6</span> 6e23 || 6e23
|-
|<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">&&&&&&&&&+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
|-
|<tt><span>&&&&&&&&&+0 ec87 6 </span>6e-12</tt>||<span style="display:none">&&&&&&&&&+0 ec87 6 </span>6e-12|| 6e-12
|-
|<tt><span>&&&&&&&&&+0 ec86 7 </span>7e-13</tt>||<span style="display:none">&&&&&&&&&+0 ec86 7 </span>7e-13|| 7e-13
|-
|<tt><span>&&&&&&&&&+0 ec87 5 </span> 5e-12</tt>||<span style="display:none">&&&&&&&&&+0 ec87 5 </span> 5e-12|| 5e-12
|-1
|<tt><span>&&&&&&&&&&-e-10 c0.000,01</span> -9.999,99e-10 </tt>||<span style="display:none">&&&&&&&&&&-e-10 c0.000,01</span> -9.999,99e-10 || -9.999,99e-10

|-
|<tt><span>&&&&&&&&&&-e-08 c6.8 </span> -3.2e-8</tt>||<span style="display:none">&&&&&&&&&&-e-08 c6.8 </span> -3.2e-8|| -3.2e-8
|-
|<tt><span>&&&&&&&&&&&-ec86 c0.3 </span> -9.7e13</tt>||<span style="display:none">&&&&&&&&&&&-ec86 c0.3 </span> -9.7e13|| -9.7e13
|-
|<tt><span>&&&&&&&&&&&-ec99 c7.7 </span> -2.3</tt>||<span style="display:none">&&&&&&&&&&&-ec99 c7.7 </span> -2.3|| -2.3
|-
|<tt>999,999,999.999,99 </tt>||999,999,999.999,99 || 999,999,999.999,99
|-
|<tt>{{lsc11amp|0|}} </tt>||{{lsc11amp|0}} || 0
|-
|<tt>{{lsc11amp|0|}}.3 </tt>||{{lsc11amp|0}}.3 || 0.3
|}

==Dates==

{|class=sortable
|-
!Date sorting mode
|-
|07 Apr 2007
|-
|16 Apr 2007
|-
|18 Mar 2007
|-
|27 Mar 2007
|-
|20 Aug 2006
|-
|22 Jul 2006
|}

<div style="float: right">
'''Example:''' ''([{{fullurl:{{FULLPAGENAME}}|action=edit}} edit] to view source)''
{|class=sortable
!date
|-
| [[2006]] <span style="display:none">a</span>
|-
| {{dts|2006-12-03}}
|-
| {{dts|-0000-03-27}}
|-
| <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]]
|-
| <span style="display:none">!9937-09-23</span>[[-0062-09-23]]
|-
| <span style="display:none">!9937-10-08</span>[[-0062-10-08]]
|-
| <span style="display:none">!9998-12-21</span>[[-0001-12-21]]
|-
| {{dts|2006-11-08}}
|-
| {{dts|0304-12-31}}
|-
| {{dts|2005-05-15}}
|}
</div>
For dates, the sorting mode is based on the ''rendered'' [[Help:Date formatting and linking|date format]]. Unfortunately, none of the standard formats for the [[Help:Date formatting and linking|Mediawiki's date-formatting feature]] match either of the formats for the "date" sorting mode. Thus, if dates are entered in one of those standard formats, the sorting mode would be "string"; only dates formated as <code>YYYY-MM-DD</code> will result in true chronological sorting.

However, like above we can put a sortkey in front which, due to CSS, is not displayed. With a hidden sortkey one can simply use the non-wikilinked format <code>YYYY-MM-DD</code> for years AD followed by 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).

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.

If at some point (i.e., after possible previous sorting) the form <code><nowiki>[[YYYY]]</nowiki></code> 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 [http://www.devguru.com/technologies/ecmascript/QuickRef/parsefloat.html parsefloat] is applied, finding the first number in the string, and basing sorting on only that number). 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.

See also:
*{{tiw|dts}}
*[[bugzilla:8226]].

==Examples elsewhere==

*[[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 <nowiki>[[YYYY-MM-DD]]</nowiki>.
*[[w:User:Smurrayinchester/Template|Pokémon table]] - prefixes numbers with "#" to have them before "-".
*[[w:Nuclear_power_by_country|Nuclear power by country]] (Featured List)
*[[w:Desert Island Discs: castaways' choices]]

==Limitations==
Javascript sorting may not work properly on tables with cells extending over multiple rows and/or columns. In some cases the table gets messed up when attempting to sort, in other cases some of the sorting buttons work while others don't.

==Empty cells==
If the first cell below the header of a column of numbers or dates is blank the sort mode will be alphabetic. In the case of a column of numbers this can be avoided by putting a hyphen (minus sign) in the cells without number. This should be avoided in a column that should be sorted alphabetically. Instead, apart from leaving the cell blank, one can use another [[w:dash|dash]].

==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:
{|class="smwtable" id="wikitable2" style="width:100%"
!demo
|-
|9
|-
|12
|-
|11
|}

Auxiliary table:

<nowiki>{|class="sortable" style="width:100%"</nowiki><br>
<nowiki>!demo</nowiki>
{|class="sortable" style="width:100%"
!header
|-
|<nowiki>|-</nowiki><br><nowiki>| 9</nowiki>
|-
|<nowiki>|-</nowiki><br><nowiki>|12</nowiki>
|-
|<nowiki>|-</nowiki><br><nowiki>|11</nowiki>
|}
<nowiki>|}</nowiki>

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

{|class="sortable" style="width:100%"
!demo
|-
| 9
|-
|11
|-
|12
|}

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

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

==See also==
*{{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) on Meta with an improved version (can be done on other sites too)
*[[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
*http://www.joostdevalk.nl/code/sortable-table/
*[[w:Wikipedia:Wikipedia Signpost/2007-01-02/Technology report]]
*{{tiw|sort}}
*[[mw:Extension:Sort2]]
*[[mw:Extension:Sort]]
*[[w:User:TimR/Tables]]

{{h:f|enname=Sorting}}

Latest revision as of 19:23, 11 May 2024

Retrieved from "https://meta.wikimedia.org/w/index.php?title=Help:Sorting&oldid=26759119"