Help:Sorting: Difference between revisions

From Meta, a Wikimedia project coordination wiki
Browse history interactively
← Older editNewer edit →
Content deleted Content added
VisualWikitext
update link to sortcode, remove old entrys and unreachable links in see also, headers formated
Line 4: Line 4:
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.
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==
== JavaScript ==
The JavaScript code [http://svn.wikimedia.org/viewvc/mediawiki/branches/wmf/1.18wmf1/resources/jquery/jquery.tablesorter.js?view=markup 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.


The JavaScript code [https://phabricator.wikimedia.org/diffusion/MW/browse/master/resources/src/jquery/jquery.tablesorter.js 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==

== Sort modes ==


As of version 1.16.5, the way items are sorted depends on the [[w:data type|data type]] of the item ''currently'' in the first row. This is true for the top cell of the column in both ascending and descending order. To determine the data type, multiple cells are tested 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.
As of version 1.16.5, the way items are sorted depends on the [[w:data type|data type]] of the item ''currently'' in the first row. This is true for the top cell of the column in both ascending and descending order. To determine the data type, multiple cells are tested 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.
Line 13: Line 14:
Tags such as ''span'' or ''sup'' are ignored when determining data type.
Tags such as ''span'' or ''sup'' are ignored when determining data type.


===Dates===
=== Dates ===

Various date formats are supported, including those with localized month names.
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
On the German Wikipedia, "16. März 2010" is correctly sorted as 2010-03-16
Line 20: Line 22:
On English Wikipedias dates are treated as US-Dates (eg. month-day-year) per default.
On English Wikipedias dates are treated as US-Dates (eg. month-day-year) per default.


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

Text is sorted in [[w:ASCII|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:
Text is sorted in [[w:ASCII|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:
<pre>
<pre>
Line 31: Line 35:
Partial list showing the default order: <code>!"#$%&'()*+,-./09:;<=>?@[\]^_'az{|}~é&mdash;</code>
Partial list showing the default order: <code>!"#$%&'()*+,-./09:;<=>?@[\]^_'az{|}~é&mdash;</code>


===Forcing the sort mode for a column===
=== Forcing the sort mode for a column ===


The sort mode can be manually specified by putting <code>data-sort-type</code> inside the header of the respective row. This functionality is based on [http://tablesorter.com tablesorter.com]. The following (case-insensitive) values are valid for data-sort-type:
The sort mode can be manually specified by putting <code>data-sort-type</code> inside the header of the respective row. This functionality is based on [http://tablesorter.com tablesorter.com]. The following (case-insensitive) values are valid for data-sort-type:
Line 388: Line 392:
| ?
| ?
|}
|}
|}

== Secondary sortkey ==

It is possible to sort by column A (primary sortkey), while for equal values in column A, sort by column B (secondary sortkey): 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).

{|class="wikitable sortable"
!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!!!!!!!!
|-
|}
|}


Line 395: Line 436:


Sometimes it is helpful to exclude the last row of a table from the sorting process.
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:
This can be achieved by declaring the last row as a footer

'''Wiki markup'''


<nowiki>{|</nowiki>class="wikitable sortable"
<nowiki>{|</nowiki>class="wikitable sortable"
Line 412: Line 452:
<nowiki>|}</nowiki>
<nowiki>|}</nowiki>


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


{|class="wikitable sortable"
{|class="wikitable sortable"
Line 426: Line 466:
|}
|}


==== Excluding the first row from sorting ====
=== 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.
The same can be applied for first rows as well, by declaring them as header using the same exclamation mark notation.


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


'''Wiki markup'''
Wiki markup:


<nowiki>{|</nowiki>class="wikitable sortable"
<nowiki>{|</nowiki>class="wikitable sortable"
Line 466: Line 507:
<nowiki>|}</nowiki>
<nowiki>|}</nowiki>


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


{|class="wikitable sortable"
{|class="wikitable sortable"
Line 489: Line 530:
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 <code>class="expand-child"</code> in the attribute of this row.
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 <code>class="expand-child"</code> in the attribute of this row.


'''Wiki markup'''
Wiki markup:

<nowiki>{|</nowiki> class="wikitable sortable"
<nowiki>{|</nowiki> class="wikitable sortable"
<nowiki>!</nowiki> style="width:9em"| Country !!data-sort-type="number"| Area
<nowiki>!</nowiki> style="width:9em"| Country !!data-sort-type="number"| Area
Line 511: Line 553:
<nowiki>|}</nowiki>
<nowiki>|}</nowiki>


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


{| class="wikitable sortable"
{| class="wikitable sortable"
Line 535: Line 577:


== Specifying a sort key ==
== 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 Doe' should actually be sorted as 'Doe' and not as 'John')
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 setting the <code>data-sort-value</code> attribute.
This can be easily achieved by setting the <code>data-sort-value</code> attribute.
Line 540: Line 583:
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]]).
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]]).


'''Wiki markup'''
Wiki markup:


<nowiki>{|</nowiki>class="wikitable sortable"
<nowiki>{|</nowiki>class="wikitable sortable"
Line 568: Line 611:
|}
|}


The old version was to set hidden sortkey with {{tiw|sort}}.
See also [[mw:Help:Sorting#Specifying a sort key|mediawiki.org]].
See also [[mw:Help:Sorting#Specifying a sort key|mediawiki.org]].


Line 598: Line 642:
|}
|}


==Special dates==
== Special dates ==

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).
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 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===
=== Use of #time ===

Using parser function #time we can put <code><nowiki><span style="display:none">&{{#expr:3e11+{{#time:U|..}}}}</span></nowiki></code> 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 [[w:Proleptic Gregorian calendar|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.
Using parser function #time we can put <code><nowiki><span style="display:none">&{{#expr:3e11+{{#time:U|..}}}}</span></nowiki></code> 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 [[w:Proleptic Gregorian calendar|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.


Line 670: Line 716:


See also:
See also:
*{{tiw|dts}}
*{{tiw|dts}} - sorting a table by a date column
*{{tim|sd}} - shows weekday in a separate column before date, and link all dates


== Cell spanning multiple rows/cells ==
==Secondary sortkey==
It is possible to sort by column A (primary sortkey), while for equal values in column A, sort by column B (secondary sortkey): 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).

{|class="wikitable sortable"
!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!!!!!!!!
|-
|}


==Cell spanning multiple rows/cells==
Cells which are spanning more than one row or column are treated as if it were multiple cells with the same value.
Cells which are spanning more than one row or column are treated as if it were multiple cells with the same value.
{|
{|
Line 745: Line 757:


=== Colspanned cells ===
=== Colspanned cells ===

The auto detection of [[#Sort modes|sort mode]] is done for colspanned cells for each column separate. Definition of sort mode by putting <code>data-sort-type</code> inside the header specify this sort mode for all colspanned columns.
The auto detection of [[#Sort modes|sort mode]] is done for colspanned cells for each column separate. Definition of sort mode by putting <code>data-sort-type</code> inside the header specify this sort mode for all colspanned columns.


Line 764: Line 777:
|}
|}


==Controlling sorting and display==
This can be combined with the method of "keeping some rows together" demonstrated above. For an example of an application of this, consider a table of three columns where the third column would make the table too wide, such as a column of miscellaneous details. These details can be put in separate rows, each staying below the corresponding row when the table is sorted.


Example:

{| class="wikitable sortable"
!style="width:9.3em"|Country!!Capital
|-
|France
|Paris <span style="display:none"><div style="position:relative;left:-9em;margin-right:-9em;overflow:auto">In Paris is the Eiffel Tower.</div></span>
|-
|<span style="display:none">France</span>
|style="border-left:2px solid #fff;border-left-style:hidden;background:#fff;padding:0.4em 0em"|<span style="display:none">Paris </span><div style="position:relative;left:-9em;margin-right:-9em;overflow:auto">In Paris is the Eiffel Tower.</div>
|-
|U.K.
|London <span style="display:none"><div style="position:relative;left:-9em;margin-right:-9em;overflow:auto">In the U.K. you cannot pay with euros.</div></span>
|-
|<span style="display:none">U.K.</span>
|style="border-left:2px solid #fff;border-left-style:hidden;background:#fff;padding:0.4em 0em"|<span style="display:none">London </span><div style="position:relative;left:-9em;margin-right:-9em;overflow:auto">In the U.K. you cannot pay with euros.</div>
|-
|Germany
|Berlin <span style="display:none"><div style="position:relative;left:-9em;margin-right:-9em;overflow:auto">Germany includes the former DDR.</div></span>
|-
|<span style="display:none">Germany</span>
|style="border-left:2px solid #fff;border-left-style:hidden;background:#fff;padding:0.4em 0em"|<span style="display:none">Berlin </span><div style="position:relative;left:-9em;margin-right:-9em;overflow:auto">Germany includes the former DDR.</div>
|}

A table row template makes this technique less cumbersome to apply, see e.g. [[w:List of furry conventions]], [[w:Template:Furry-con-list-start]] and [[w:Template:Furry-con-list-entry]].

==Controlling sorting and display==
Text undesired for sorting but needed for display:
Text undesired for sorting but needed for display:
*In '''numeric''' sorting mode, the sorting will still work properly even though the cell (except the cell of the first data row) contains text ''after'' numbers (e.g. "200 approx"). Empty cell is treated as "zero" when sorting numerically. See e.g. [[Help:Sorting/countries]]. However bear in mind that the cell of the first data row will change accordingly after sorting. If that cell no longer contains number only after sorting, the sorting mode will change. For example, if the cell of the first data row becomes "200 approx" after sorting, this will make the sorting mode '''alphabetic'''.
*In '''numeric''' sorting mode, the sorting will still work properly even though the cell (except the cell of the first data row) contains text ''after'' numbers (e.g. "200 approx"). Empty cell is treated as "zero" when sorting numerically. See e.g. [[Help:Sorting/countries]]. However bear in mind that the cell of the first data row will change accordingly after sorting. If that cell no longer contains number only after sorting, the sorting mode will change. For example, if the cell of the first data row becomes "200 approx" after sorting, this will make the sorting mode '''alphabetic'''.
Line 799: Line 785:




==Static column==
== Static column ==

A static column, e.g. with row numbers, can be obtained with two side-by-side tables with for each row the same height set in both tables:
A static column, e.g. with row numbers, can be obtained with two side-by-side tables with for each row the same height set in both tables:


Line 824: Line 811:
The style can be adjusted to make it appear as a single table. If for some row the height of that row is too small for the text in a cell on one of the sides, the browser increases it, and there is no longer a match.
The style can be adjusted to make it appear as a single table. If for some row the height of that row is too small for the text in a cell on one of the sides, the browser increases it, and there is no longer a match.


==Default order==
== Default order ==

It is not possible to make a table appear sorted by a certain column without the user clicking on it. By default, the rows of a table always appear in the same order as in the wikitext. If you want a table to appear sorted by a certain column, you must sort the wikitext itself in that order; see the next section for one way to do this.
It is not possible to make a table appear sorted by a certain column without the user clicking on it. By default, the rows of a table always appear in the same order as in the wikitext. If you want a table to appear sorted by a certain column, you must sort the wikitext itself in that order; see the next section for one way to do this.


===Sorting the wikitext of a table===
=== Sorting the wikitext of a table ===

Sorting the wikitext itself, thus creating a new default sort order, can be done semi-automatically as follows. Take the wikitext of the table without top and bottom lines. Use "find and replace" to replace the cell separators with special code not containing "|". If there are pipes in the table cells, replace all pipes by some code, and replace that code with a newline in front of it (originating from the code for the start of a new row) back. Apply [[mw:Module:Sort]] (see [[mw:Module talk:Sort]]) at [[mw:Special:ExpandTemplates]] by putting:
Sorting the wikitext itself, thus creating a new default sort order, can be done semi-automatically as follows. Take the wikitext of the table without top and bottom lines. Use "find and replace" to replace the cell separators with special code not containing "|". If there are pipes in the table cells, replace all pipes by some code, and replace that code with a newline in front of it (originating from the code for the start of a new row) back. Apply [[mw:Module:Sort]] (see [[mw:Module talk:Sort]]) at [[mw:Special:ExpandTemplates]] by putting:
<code><nowiki>{{#invoke:Sort|f|{{!}}-</nowiki></code><br/>
<code><nowiki>{{#invoke:Sort|f|{{!}}-</nowiki></code><br/>
Line 835: Line 824:
This method sorts by the wikitext of the rows, so in principal by the first column (and the second as secondary key), although wikitext codes in the cells of the first column before the content can affect the order.
This method sorts by the wikitext of the rows, so in principal by the first column (and the second as secondary key), although wikitext codes in the cells of the first column before the content can affect the order.


==Basic alphabetic sorting order==
== Basic alphabetic sorting order ==

{|class="wikitable sortable"
{|class="wikitable sortable"
!demo
!demo
Line 942: Line 932:
As of today, an UCA-based sort is still not implemented in the client-side Javascript code, but some wikis are implementing a limited form of multilevel collation using custom basic replacement rules tuned for specific languages.
As of today, an UCA-based sort is still not implemented in the client-side Javascript code, but some wikis are implementing a limited form of multilevel collation using custom basic replacement rules tuned for specific languages.


==Server issue==
== Server issue ==

It has been observed that the MediaWiki code on the server replaces a regular space before "!" by a [[w:non-breaking space|non-breaking space]] <code>&amp;#160;</code>, affecting the sorting order. To avoid this, this blank space can be coded as <code>&amp;#32;</code>, or the exclamation mark may be surrounded by <code>&lt;nowiki&gt;</code> and <code>&lt;/nowiki&gt;</code> tags. This is to comply with French typographic rules, where exclamation marks (and a few other punctuations) must be preceded (or sometimes followed) by a space (preferably narrow) which must still be unbreakable when it is effectively needed and present, the substitution being performed as an convenient editing facility of the Wiki code for cases that are very frequent within many texts.
It has been observed that the MediaWiki code on the server replaces a regular space before "!" by a [[w:non-breaking space|non-breaking space]] <code>&amp;#160;</code>, affecting the sorting order. To avoid this, this blank space can be coded as <code>&amp;#32;</code>, or the exclamation mark may be surrounded by <code>&lt;nowiki&gt;</code> and <code>&lt;/nowiki&gt;</code> tags. This is to comply with French typographic rules, where exclamation marks (and a few other punctuations) must be preceded (or sometimes followed) by a space (preferably narrow) which must still be unbreakable when it is effectively needed and present, the substitution being performed as an convenient editing facility of the Wiki code for cases that are very frequent within many texts.


==Persistent sort states using cookies==
== Persistent sort states using cookies ==

Adding this snippet to your [[MediaWiki:Common.js]] page will make the sortable tables remember their columns sort states in a cookie so they look the same next time the page is visited. Each sortable table must have a unique '''id''' attribute for its state to be stored in the cookie.
Adding this snippet to your [[MediaWiki:Common.js]] page will make the sortable tables remember their columns sort states in a cookie so they look the same next time the page is visited. Each sortable table must have a unique '''id''' attribute for its state to be stored in the cookie.
<source lang=javascript>
<source lang=javascript>
Line 984: Line 976:
</source>
</source>


==See also==
== See also ==

*[[mw:Help:Sorting]]
*[[Help:Table]]
*{{ml|Help:Collapsing|Sortable_collapsible_table|Sortable collapsible table}}
*{{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
*[[:w:Category:Sorting templates]]
*[[:w:Category:Sorting templates]]
*[https://phabricator.wikimedia.org/diffusion/MW/browse/master/resources/src/jquery/jquery.tablesorter.js jquery.tablesorter.js] - sorting code
*{{tim|sd}} - shows buggy date sorting when some or all dates are linked
*[[phab:tag/mediawiki-jquery-tablesorter/]] Tablesorter Workboard for bugs and improvments
*[[Help:Table]]
*[http://svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/jquery/jquery.tablesorter.js jquery.tablesorter.js] - sorting code
*[http://svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/skins/common/wikibits.js wikibits.js] - contains, among other things, the old sorting code
**changes regarding sorting:
***Sep 2008: allow negative numbers and scientific notation in determining numeric sort mode
***Nov 2007 [http://svn.wikimedia.org/viewvc/mediawiki?view=rev&revision=27138 allow multiple commas in numbers] - from [http://en.wikipedia.org/w/index.php?title=MediaWiki:Common.js&oldid=122738297]
***Feb 2007 [http://svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/skins/common/wikibits.js?r1=19987&r2=19989 allow pound and euro in currency sort mode]
***Jan 2007 [http://svn.wikimedia.org/viewvc/mediawiki?view=rev&revision=19699 sorttable.js merged into wikibits.js]
***for older revisions see the revision history of [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 improved versions
**[[sv:MediaWiki:Common.js]] page overriding function ts_parseFloat(num); adaptation to decimal comma
**[[en:Wikipedia:Village_pump_(technical)#Lots_of_changes_to_.22wikibits.js.22|proposed changes]]: [https://bugzilla.wikimedia.org/show_bug.cgi?id=15398] [https://bugzilla.wikimedia.org/show_bug.cgi?id=15399] [https://bugzilla.wikimedia.org/show_bug.cgi?id=15400] [https://bugzilla.wikimedia.org/show_bug.cgi?id=15401] [https://bugzilla.wikimedia.org/show_bug.cgi?id=15402] [https://bugzilla.wikimedia.org/show_bug.cgi?id=15403] [https://bugzilla.wikimedia.org/show_bug.cgi?id=15404] [https://bugzilla.wikimedia.org/show_bug.cgi?id=15405] [https://bugzilla.wikimedia.org/show_bug.cgi?id=15406 force sortorder of a column] [https://bugzilla.wikimedia.org/show_bug.cgi?id=15422 more numbers] [https://bugzilla.wikimedia.org/show_bug.cgi?id=15436]
*[[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://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.
*[[mw:Help:Sorting]]
*http://blog.webkist.com/archives/000043.html
*[[mw:Extension:Sort2]] generates sorted lists based on existing token lists.
*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]]


Examples elsewhere:
Examples elsewhere:

Revision as of 13:38, 11 October 2015

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. Browsers need to support JavaScript and it needs to be enabled for sorting to work.

Sort modes

As of version 1.16.5, the way items are sorted depends on the data type of the item currently in the first row. This is true for the top cell of the column in both ascending and descending order. To determine the data type, multiple cells are tested 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.

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 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{|}~é—

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. 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
|-
|01.10.1977||Smith||1.85
|-
|11.6.1972||Ray||1.89
|-
|1.9.1992||Bianchi||1.72
|}
Date Name Height
01.10.1977 Smith 1.85
11.6.1972 Ray 1.89
1.9.1992 Bianchi 1.72

Examples

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 "−" (a minus sign).

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.

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
ep3
e8
ep7
na2
na7
e6
ep5
ep4
e7
s0
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.)
?

Secondary sortkey

It is possible to sort by column A (primary sortkey), while for equal values in column A, sort by column B (secondary sortkey): 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 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.

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

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.

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 Doe' should actually be sorted as 'Doe' and not as 'John') This can be easily achieved by setting the data-sort-value attribute.

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

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
|-
!Average:||1.82
|}

This gives:

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

The old version was to set hidden sortkey with w:Template:Sort. See also mediawiki.org.

If you put in data-sort-value the same content as above row, keep this rows 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 sortkey input with visible sortkey input with hidden sortkey Unix time
010203 &301715216523 09 May 2024 01:02:03 &301715216523 010203 &301715216523 010203 1715216523
&Expression error: Unexpected < operator. Error: Invalid time. &Expression error: Unexpected < operator. &Expression error: Unexpected < operator. Error: Invalid time.
unknown &Expression error: Unexpected < operator. Error: Invalid time. &Expression error: Unexpected < operator. unknown &Expression error: Unexpected < operator. unknown Error: Invalid time.
1/2 &301704153600 02 Jan 2024 00:00:00 &301704153600 1/2 &301704153600 1/2 1704153600
1/2/3 &301041465600 02 Jan 2003 00:00:00 &301041465600 1/2/3 &301041465600 1/2/3 1041465600
1-2-2003 &301044057600 01 Feb 2003 00:00:00 &301044057600 1-2-2003 &301044057600 1-2-2003 1044057600
1-2-3 &300981158400 03 Feb 2001 00:00:00 &300981158400 1-2-3 &300981158400 1-2-3 981158400
2007 &301167609600 01 Jan 2007 00:00:00 &301167609600 2007 &301167609600 2007 1167609600
1 Jan 111, 00:00:00 &241335609600 01 Jan 0111 00:00:00 &241335609600 1 Jan 111, 00:00:00 &241335609600 1 Jan 111, 00:00:00 -58664390400
31 Dec 9999, 23:59:59 &553402300799 31 Dec 9999 23:59:59 &553402300799 31 Dec 9999, 23:59:59 &553402300799 31 Dec 9999, 23:59:59 253402300799
Sep 1970 &300020995200 01 Sep 1970 00:00:00 &300020995200 Sep 1970 &300020995200 Sep 1970 20995200
1970 &300000000000 01 Jan 1970 00:00:00 &300000000000 1970 &300000000000 1970 0
Jun 2007 or later &301180656000 01 Jun 2007 00:00:00 or later &301180656000 Jun 2007 or later &301180656000 Jun 2007 or later 1180656000 or later
Jun 2007 perhaps earlier &301180656000 01 Jun 2007 00:00:00 perhaps earlier &301180656000 Jun 2007 perhaps earlier &301180656000 Jun 2007 perhaps earlier 1180656000 perhaps earlier
2007-6 &301180656000 01 Jun 2007 00:00:00 &301180656000 2007-6 &301180656000 2007-6 1180656000
Jun 2007 &301180656000 01 Jun 2007 00:00:00 &301180656000 Jun 2007 &301180656000 Jun 2007 1180656000
4 Jun 2007 &301180915200 04 Jun 2007 00:00:00 &301180915200 4 Jun 2007 &301180915200 4 Jun 2007 1180915200
3 Jul 2007 &301183420800 03 Jul 2007 00:00:00 &301183420800 3 Jul 2007 &301183420800 3 Jul 2007 1183420800
12 Aug 2006 &301155340800 12 Aug 2006 00:00:00 &301155340800 12 Aug 2006 &301155340800 12 Aug 2006 1155340800
1 Mar 2006 -1day &301141084800 28 Feb 2006 00:00:00 &301141084800 1 Mar 2006 -1day &301141084800 1 Mar 2006 -1day 1141084800
1 Mar 2008 -1day &301204243200 29 Feb 2008 00:00:00 &301204243200 1 Mar 2008 -1day &301204243200 1 Mar 2008 -1day 1204243200
1 Mar 2010 -1day &301267315200 28 Feb 2010 00:00:00 &301267315200 1 Mar 2010 -1day &301267315200 1 Mar 2010 -1day 1267315200
1 Mar 1900 -1day &297796022400 28 Feb 1900 00:00:00 &297796022400 1 Mar 1900 -1day &297796022400 1 Mar 1900 -1day -2203977600
1 Mar 1600 -1day &288329001600 29 Feb 1600 00:00:00 &288329001600 1 Mar 1600 -1day &288329001600 1 Mar 1600 -1day -11670998400
Jun 1607 &288557875200 01 Jun 1607 00:00:00 &288557875200 Jun 1607 &288557875200 Jun 1607 -11442124800
20240509023106 &301715221866 09 May 2024 02:31:06 &301715221866 20240509023106 &301715221866 20240509023106 1715221866
yesterday &301715126400 08 May 2024 00:00:00 &301715126400 yesterday &301715126400 yesterday 1715126400
today &301715212800 09 May 2024 00:00:00 &301715212800 today &301715212800 today 1715212800
tomorrow &301715299200 10 May 2024 00:00:00 &301715299200 tomorrow &301715299200 tomorrow 1715299200
1week &301715826666 16 May 2024 02:31:06 &301715826666 1week &301715826666 1week 1715826666
-1week &301714617066 02 May 2024 02:31:06 &301714617066 -1week &301714617066 -1week 1714617066
1day &301715308266 10 May 2024 02:31:06 &301715308266 1day &301715308266 1day 1715308266
-1day &301715135466 08 May 2024 02:31:06 &301715135466 -1day &301715135466 -1day 1715135466
1month &301717900266 09 Jun 2024 02:31:06 &301717900266 1month &301717900266 1month 1717900266
-1month &301712629866 09 Apr 2024 02:31:06 &301712629866 -1month &301712629866 -1month 1712629866
1year &301746757866 09 May 2025 02:31:06 &301746757866 1year &301746757866 1year 1746757866
-1year &301683599466 09 May 2023 02:31:06 &301683599466 -1year &301683599466 -1year 1683599466
1000year &333272130666 09 May 3024 02:31:06 &333272130666 1000year &333272130666 1000year 33272130666
10000month &328012789866 09 Sep 2857 02:31:06 &328012789866 10000month &328012789866 10000month 28012789866
1000000day &388115221866 06 Apr 4762 02:31:06 &388115221866 1000000day &388115221866 1000000day 88115221866
10000000hour &337715221866 23 Feb 3165 18:31:06 &337715221866 10000000hour &337715221866 10000000hour 37715221866
1000000000minute &361715221866 05 Sep 3925 13:11:06 &361715221866 1000000000minute &361715221866 1000000000minute 61715221866
100000000000second &401715221866 24 Mar 5193 12:17:46 &401715221866 100000000000second &401715221866 100000000000second 101715221866
7980year &Expression error: Unexpected < operator. Error: #time only supports years up to 9999. &Expression error: Unexpected < operator. 7980year &Expression error: Unexpected < operator. 7980year Error: #time only supports years up to 9999.
-1890year &242072524266 09 May 0134 02:31:06 &242072524266 -1890year &242072524266 -1890year -57927475734
Mon &301715558400 13 May 2024 00:00:00 &301715558400 Mon &301715558400 Mon 1715558400
Tue &301715644800 14 May 2024 00:00:00 &301715644800 Tue &301715644800 Tue 1715644800
Wed &301715731200 15 May 2024 00:00:00 &301715731200 Wed &301715731200 Wed 1715731200
Thu &301715212800 09 May 2024 00:00:00 &301715212800 Thu &301715212800 Thu 1715212800
Fri &301715299200 10 May 2024 00:00:00 &301715299200 Fri &301715299200 Fri 1715299200
Sat &301715385600 11 May 2024 00:00:00 &301715385600 Sat &301715385600 Sat 1715385600
Sun &301715472000 12 May 2024 00:00:00 &301715472000 Sun &301715472000 Sun 1715472000

To use dates before the year 111, add a multiple of 400, e.g. 6000, to all years, this effectively shifts the range to 1 Jan -5889, 00:00:00 through 31 Dec 3999, 23:59:59, without changing the calendar.

See also:

  • w:Template:Dts - sorting a table by a date column
  • Template:Sd - shows weekday in a separate column before date, and link all dates

Cell spanning multiple rows/cells

Cells which are spanning more than one row or column are treated as if it were multiple cells with the same value.

rowspan
Date Name Height
01.10.1977 Smith 1.85
11.06.1972 Adams
01.09.1992 Bianchi 1.72
colspan
A B C
A 2 1
B 1 3
C 2

Since MediaWiki Version 1.26 wmf23 (Sept. 2015) sorting of colspanned cells works right. Also missing cells at the end of a row will change after first sort into a cell with empty content.

Colspanned cells

The auto detection of sort mode is done for colspanned cells for each column separate. Definition of sort mode by putting data-sort-type inside the header specify this sort mode for all colspanned columns.

Only if you wish that every spanned column get a sepatrate Sortkey you can use the CSS hack described here: To allow sorting, the formal number of cells in each row should be equal (if not all columns are made sortable this should apply at least for the number of cells up to and including the last sortable column). However, with a CSS hack the number of cells shown in a row can differ from the formal number of cells. For example, two formal cells can be shown as one by specifying a width for the first column, shifting the contents of the second cell to the left, increasing its width by the same amount, and hiding the cell border that would normally be visible. Hidden sortkeys can be used to control, for sorting with respect to each column, how this row should be sorted.

Example:

Country Capital
France Paris
Z M
Sorting with respect to the first column this row sorts like Z, with respect to the second column like M
U.K. London

Controlling sorting and display

Text undesired for sorting but needed for display:

  • In numeric sorting mode, the sorting will still work properly even though the cell (except the cell of the first data row) contains text after numbers (e.g. "200 approx"). Empty cell is treated as "zero" when sorting numerically. See e.g. Help:Sorting/countries. However bear in mind that the cell of the first data row will change accordingly after sorting. If that cell no longer contains number only after sorting, the sorting mode will change. For example, if the cell of the first data row becomes "200 approx" after sorting, this will make the sorting mode alphabetic.
  • 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.


Static column

A static column, e.g. with row numbers, can be obtained with two side-by-side tables with for each row the same height set in both tables:

Number
1
2
Country Capital
The Netherlands Amsterdam (although The Hague is the seat of government)
France Paris

The style can be adjusted to make it appear as a single table. If for some row the height of that row is too small for the text in a cell on one of the sides, the browser increases it, and there is no longer a match.

Default order

It is not possible to make a table appear sorted by a certain column without the user clicking on it. By default, the rows of a table always appear in the same order as in the wikitext. If you want a table to appear sorted by a certain column, you must sort the wikitext itself in that order; see the next section for one way to do this.

Sorting the wikitext of a table

Sorting the wikitext itself, thus creating a new default sort order, can be done semi-automatically as follows. Take the wikitext of the table without top and bottom lines. Use "find and replace" to replace the cell separators with special code not containing "|". If there are pipes in the table cells, replace all pipes by some code, and replace that code with a newline in front of it (originating from the code for the start of a new row) back. Apply mw:Module:Sort (see mw:Module talk:Sort) at mw:Special:ExpandTemplates by putting: {{#invoke:Sort|f|{{!}}-
{{!}} (with the newline) before, and }} after the wikitext, to sort the items between the pipes, with the desired separator in the result. Discard the items at the start containing "-" and a newline. Restore the cell separators and the pipes in the cells by replacing the temporary codes for them. Readd the top and bottom lines.

This method sorts by the wikitext of the rows, so in principal by the first column (and the second as secondary key), although wikitext codes in the cells of the first column before the content can affect the order.

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

This is not a fully alphabetic sort order: letter case is first folded to lowercase using a basic 1-to-1 conversion table (limited to the Basic Multilingual Plane of Unicode, and whose coverage and completeness still depends on browser versions and on their current implementation of the versioned Unicode Character Database), but letters with diacritics (and all other digits, symbols or special whitespaces or format control characters) will still sort according to the binary encoding of the casefolded letter, using the binary order of the UTF-16 code units (exposed and seen in Javascript through the parsed HTML DOM), but not the binary order of UTF-8 code units in the HTML page, and not of codepoints as one could also expect for encoded characters in supplementary planes).

In addition, no normalization of the Unicode text is being performed (so canonically equivalent strings, that should compare equal or with only very minor binary difference, may sometimes compare very far away, with completely different strings interleaved between them). For this reason, MediaWiki pages should always be encoded with their text in the Normalized Form C (preComposed), as recommended in the HTML standards.

As of today, an UCA-based sort is still not implemented in the client-side Javascript code, but some wikis are implementing a limited form of multilevel collation using custom basic replacement rules tuned for specific languages.

Server issue

It has been observed that the MediaWiki code on the server replaces a regular space before "!" by a non-breaking space &#160;, affecting the sorting order. To avoid this, this blank space can be coded as &#32;, or the exclamation mark may be surrounded by <nowiki> and </nowiki> tags. This is to comply with French typographic rules, where exclamation marks (and a few other punctuations) must be preceded (or sometimes followed) by a space (preferably narrow) which must still be unbreakable when it is effectively needed and present, the substitution being performed as an convenient editing facility of the Wiki code for cases that are very frequent within many texts.

Persistent sort states using cookies

Adding this snippet to your MediaWiki:Common.js page will make the sortable tables remember their columns sort states in a cookie so they look the same next time the page is visited. Each sortable table must have a unique id attribute for its state to be stored in the cookie. 

addOnloadHook( function() {
    jQuery('.sortable').each( function() {
        var id = jQuery(this).attr('id');
        document.shCookie = getCookie('sortheader-'+id);
        document.sortheaderId = 0;
        jQuery('#'+id+' a.sortheader').each( function() {
            var id = jQuery(this).parent().parent().parent().parent().attr('id');
            var sh = document.sortheaderId++;
            if( sh+100 == document.shCookie ) { ts_resortTable(this); ts_resortTable(this); }
            if( sh == document.shCookie ) { ts_resortTable(this); sh += 100; }
            jQuery(this).bind('click', {id: id, sh: sh}, function(e) {
                setCookie('sortheader-'+e.data.id, e.data.sh, 1);
                e.data.sh += e.data.sh < 100 ? 100 : -100;
            });
        });
    });
});

function setCookie(c_name,value,exdays) {
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name) {
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++) {
        x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
        y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
        x=x.replace(/^\s+|\s+$/g,"");
        if (x==c_name) return unescape(y);
    }
}

See also

Examples elsewhere:


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
Other languages:
English · français · 日本語
Retrieved from "https://meta.wikimedia.org/w/index.php?title=Help:Sorting&oldid=14059949"