Help:Sortable tables: Difference between revisions

Content deleted Content added
fix broken link
updated from m:Help:Sorting
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 and above, 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 ⟶ 8:
==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 applies 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). See also [http://meta.wikimedia.org/w/index.php?title=Help:Sorting&oldid=560222 the version of this page applicable without modifications of the JavaScript].
 
==Sort modes==
Line 34 ⟶ 36:
|- style="vertical-align:top;"
|
{|class="wikitable sortable"
!numbers
|-
Line 64 ⟶ 66:
|}
|
{|class="wikitable sortable"
!numbers
|-
Line 82 ⟶ 84:
|}
|
{|class="wikitable sortable"
!first alphabetic, later also numeric mode
|-
Line 110 ⟶ 112:
|- style="vertical-align:top;"
|
{|class="wikitable sortable"
!currencies
|-
Line 122 ⟶ 124:
|}
|
{|class="wikitable sortable"
!currencies
|-
Line 134 ⟶ 136:
|}
|
{|class="wikitable sortable"
!currencies
|-
Line 146 ⟶ 148:
|}
|
{|class="wikitable sortable"
!currencies
|-
Line 158 ⟶ 160:
|}
|
{|class="wikitable sortable"
!comparison
|-
Line 170 ⟶ 172:
|}
|
{|class="wikitable sortable"
!comparison
|-
Line 182 ⟶ 184:
|}
|
{|class="wikitable sortable"
!"currency" mode
|-
Line 204 ⟶ 206:
|}
|
{|class="wikitable sortable"
!"currency" mode ("ca. 80" sorts at 0 due to dot)
|-
Line 226 ⟶ 228:
|- style="vertical-align:top;"
|
{|class="wikitable sortable"
!mixed notations
|-
Line 330 ⟶ 332:
|}
|
{|class="wikitable sortable"
!first number in each element counts
|-
Line 344 ⟶ 346:
|}
|
{|class="wikitable sortable"
!percentage
|-
Line 358 ⟶ 360:
|}
|
{|class="wikitable sortable"
!mixed notations
|-
Line 389 ⟶ 391:
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|TableTemplate: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
Line 687 ⟶ 689:
|22 Jul 2006
|}
 
{|class="wikitable sortable"
|-
Line 867 ⟶ 869:
|3||z||17.aug.2006||6.50||row 8
|-class="sortbottom"
!Bottom!!!!!!!!!!!!
|-
|}
Line 884 ⟶ 886:
 
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).
 
==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:
 
{|
|-
{| class="wikitable"
!Number
|- style="height:100px"
|1
|- style="height:100px"
| 2
|}
|
{| class="wikitable sortable"
!Country
!Capital
|- style="height:100px"
|The Netherlands || Amsterdam (although The Hague is the seat of government)
|- style="height:100px"
|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.
 
==Sorting the wikitext of a table==
Line 893 ⟶ 921:
 
Original table:
{|class="smwtable"wikitable id="wikitable2" style="width:100%sortable"
!demo
|-
Line 905 ⟶ 933:
Auxiliary table:
 
<nowiki>{|class="sortable"wikitable style="width:100%sortable"</nowiki><br>
<nowiki>!demo</nowiki>
{|class="sortable"wikitable style="width:100%sortable"
!header
|-
Line 920 ⟶ 948:
After copying the rendered text to the edit box, and deleting the header line, this renders as:
 
{|class="sortable"wikitable style="width:100%sortable"
!demo
|-
Line 1,030 ⟶ 1,058:
 
The two-character entries such as A1 demonstrate that A and a are at the same position.
 
==Browser issues==
With Safari on Mac-OSX a table can only be sorted by the first column: all sort buttons have the effect that only the leftmost one is supposed to have.
 
==See also==
Line 1,059 ⟶ 1,090:
*[[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:List of User:Smurrayinchester/Template|Pokémon characterstable]] - prefixes numbers with "#" to have them before "-".
*[[w:Nuclear_power_by_country|Nuclear power by country]] (Featured List)
*[[w:Desert Island Discs: castaways' choices]]
*[[:zh:秘鲁行政区划#大区人口|zh:秘鲁行政区划]] (Subdivisions of Peru) for sorting of Chinese (CJK)