Ajuda: Tabelas ordenáveis

Nota: Quando modificais esta página, estais a aceitar que a vossa contribuição se publique no marco de CC0. Olhem Páginas de ajuda de domínio público para mais informação.

Para criar uma tabela ordenável, adicione a classe sortable a uma tabela. This class adds arrows displayed beside the header within each header cell. (Veja o exemplo em baixo.) When you click on an arrow, the table rows are arranged according to the chosen column. Continuously clicking the arrow alters the sorting order in the following pattern: Ascending (min to max), Descending (max to min), and then Unsorted (sequential). You can perform secondary sorts by shift-clicking the arrows in different columns.

Items are sorted based on the data type of the first few rows below the header. To determine the data type, the first five non-empty rows below the header are examined upon page loading, and the most suitable format is selected. Discrepancies can occur. Additionally, specific columns can have their sorting order forced, as explained in the relevant section below.

Different date formats are accepted, even those with month names in local languages. For instance, on the German Wikipedia, "16. März 2010" is appropriately sorted as 2010-03-16.

Different numerical formats, including ones with various separators like periods, commas, apostrophes, or slashes (such as . , ' /), are supported. The English Wikipedia typically uses the US date format, (e.g. month-day-year).

The script can detect numbers that use either "." or "," as decimal separators, as well as numbers written in scientific notation (using "e" or "E"). By default, numbers will be sorted based on alphanumeric order by default, meaning that they will be sorted as strings rather than numerical values. This may result in unexpected sortings, such as "9" coming after "10". However, this default behavior can be overridden if desired.

When lists are sorted alphabetically by MediaWiki, the order of characters is sorted with Intl.Collator. This sorts accented characters correctly based on PageContentLanguage.

Android Webviews don't support this, so fallback to the old sort routine is required. The order is the same as the order of Unicode code points. Some of the more common characters are ordered as follows (in ascending order):

­

Adding data-sort-type="..." to the header lets you control how a table is sorted. This feature is derived from tablesorter.com (webarchive). Valid values for "data-sort-type" include the following which are not case-sensitive:

• currency
• number
• isoDate
• time
• IPAddress
• usLongDate
• date
• text
• url

Por exemplo:

Texto wiki

{|class="wikitable sortable"
!data-sort-type="date"| Data !! Nome !! Altura !!data-sort-type="number"| Salário
|-
| 01.10.1977 || Smith || 1.85 || 1,000.000
|-
| 11.6.1972 || Ray || 1.89 || 900.000
|-
| 1.9.1992 || Bianchi || 1.72 || 2,000.50
|}

Renderização

You can adjust how cells are sorted or parsed if needed. For instance, if a cell says "John Smith" but should be sorted under "Smith", you can use the data-sort-value="..." attribute to achieve this.

Texto wiki

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

Renderização

To ensure certain text isn't sorted but still displayed, use data-sort-type="...". You can then append additional text after values, like "200 approx" or "100^[1]". An empty cell sorts as "-Infinity". If a cell contains a range of dates or numbers (for example, from 2 to 5), use data-sort-value="...".

The first column sorts plain numbers. The second column sorts more content as numbers using data-sort-type="number" in the table header. The fourth column defines numeric sort values independently of cell content using data-sort-value="...".

The way commas (,) and decimal points (.) are displayed in Mediawiki depends on the language settings. Currency symbols and the percentage (%) symbol are sorted numerically based on these settings.

You can sort data by columns, with Column A as the primary sort key. If Column A has equal values, use Column B as the secondary key. Click Column A's sort button once or twice, then while holding shift, click Column B's sort button once or twice for further refinement.

Por exemplo:

Click on the "Text" column first, then hold down the shift key and click on the "Numbers" column. You'll notice that the items are sorted based on text first and then numbers.

You can skip sorting the last row of a table by marking it with class="sortbottom". You can also exclude it from sorting by declaring it as a footer with an exclamation mark(!).

Texto wiki

{|class="wikitable sortable"
! Nome !! Sobrenome !! Altura
|-
| John || Smith || 1.85
|-
| Ron || Ray || 1.89
|-
| Mario || Bianchi || 1.72
|- class="sortbottom"
! !! Média: || 1.82
|}

Renderização

Texto wiki

{|class="wikitable sortable"
! Nome !! Sobrenome !! Altura
|- class="sorttop"
! !! Média: || 1.82
|-
| John || Smith || 1.85
|-
| Ron || Ray || 1.89
|-
| Mario || Bianchi || 1.72
|}

Renderização

Texto wiki

{|class="wikitable sortable"
! Números !! Alfabeto !! Datas !! Moeda !!class="unsortable"| Não ordenável
|-
| 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 !!
|-
|}

Renderização

Texto wiki

{| class="wikitable sortable"
!style="width:9em"| País !!data-sort-type="number"| Área
|-
| França
| 674 843 km²
|- class="expand-child" style="font-size:85%; line-height:1.2; color:gray"
|colspan="2"| Em Paris na Torre Eiffel.
|-
| Reino Unido
| 242 495 km²
|- class="expand-child" style="font-size:85%; line-height:1.2; color:gray"
|colspan="2"| No Reino Unido não pode pagar com euros.
|- class="expand-child" style="font-size:85%; line-height:1.2; color:gray"
|colspan="2"| E conduz no lado esquerdo da estrada.
|-
| Alemanha
| 357 168 km²
|- class="expand-child" style="font-size:85%; line-height:1.2; color:gray"
|colspan="2"| A Alemanha inclui a antiga DDR.
|}

Renderização

If you put in data-sort-value the same content as above row, keep this rows also 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"
! País/província !! Capital
|-
| França || Paris
|-
| Holanda || Amesterdão
|-
|data-sort-value="Holanda"| Sul da Holanda ||data-sort-value="Amsterdão"| Haia
|-
| Reino Unido || Londres
|}

Para representar os anos anteriores à Era Comum (BCE), subtraia o ano de BCE de 10 000. Por exemplo, -62 BCE seria 10 000 - 62 = 9938.

Por exemplo, 23 de setembro de 62 BCE seria representado como 23-09-9938.

If a table column has incomplete dates, sorting won't be an issue. If only a year and month are provided, it's sorted before the first day of that month. Similarly, if only a year is given, it's sorted before the first month or day of that year.

Texto wiki

{| class="wikitable sortable"
|-
! Data
|-
| 2022-01-01
|-
| 2023-12-31
|-
| 2024
|-
| 2024-04
|-
| 2024-04-00
|-
| 2024-05
|-
| 2024-05-00
|}

Renderização

You can use the parser function #time and HTML tags to display a specific date range. By adding the HTML tag <span style="display:none">&{{#expr:3e11+{{#time:U|..}}}}</span> before the displayed date, you can manipulate the way the date is shown. This method works for dates between January 1, 111 CE, and December 31, 9999 CE, using the proleptic Gregorian calendar. The added value ensures all values are positive and uniform in length. Placing "&" before the expression forces string sorting mode.

You can input dates and times using any PHP format for date and time. Remember, if you're specifying just a year, you must include a month (usually January) in the background.

Por exemplo, utilizando date :

To use dates before 111 CE, add a multiple of 400 (like 6000) to all years. This shifts the range to start from January 1st, -5889, at 00:00:00, and ends on December 31st, 3999, at 23:59:59, without altering the calendar system.

Consulte também:

• w:Template:dts - Sorting a table by a date column

Sort modes are detected separately for each column containing colspanned cells. You can set a sort mode for all colspanned columns by including data-sort-type in the header.

To implement separate sort keys for each column within a colspanned cell, utilize a CSS trick described here: Ensure an equal number of cells in each row for sortable columns. If there's a mismatch, all columns become sortable. This rule should apply up to and including the last sortable column. However, employing a CSS workaround allows for a difference between the displayed number of cells in a row and the formal count. For instance, two formal cells can appear as one by adjusting the width of the first column, shifting the content of the second cell to the left, increasing its width by the same measure, and concealing the cell border that would typically be visible. Concealed sort keys enable managing the sorting order of specific rows in relation to each column.

Por exemplo:

To make a static column, like one with row numbers, use two tables placed next to each other. Make sure each row in both tables has the same height. You can also use w:Template:Static row numbers to generate row numbers implicitly using CSS rather than creating another table.

The formatting can be modified to present everything in a unified table. If a row is too short for the text in a cell, the browser will expand it, disrupting the alignment.

You can't show a table sorted by a column without the user clicking on it. By default, table rows appear in the order as the wikitext. To display a table sorted by a specific column, you'll need to arrange the wikitext accordingly. One way of doing this is:

1. Rearrange the table's wikitext without the top and bottom lines.
2. Replace the cell separators with a unique code that doesn't contain a "|" by using "find and replace".
3. Replace any pipes within table cells with a code, and then substitute that code with a newline character preceded by it (indicating the start of a new row).
4. Use the Sort module on Special:ExpandTemplates. To sort the items between the pipes and produce the desired separator, expand templates and add {{#invoke:Sort|f||- | (with the newline) before and }} after the wikitext.
5. Delete the items that begin with "-" and a newline.
6. Change the temporary codes for the cell separators and pipes inside the cells to restore them.

This sorting method relies on the wikitext in each row, primarily sorting by the content of the first column. The second column serves as a secondary key. However, wikitext codes in the first column cells before the content can impact the order.

• Help:Table
• Categoria: Modelos de ordenação
• jquery.tablesorter.js – TableSorter para MediaWiki
• http://www.kryogenix.org/code/browser/sorttable/ – Stuart Langridge's original code needs explaining. In the MediaWiki version, tables no longer need IDs.
• For much more detailed instructions, see the Wikipedia page.
• Manual:$wgCategoryCollation – Allows you to change the collation used for categories (requires shell access).
• Unicode character references on the Wikibooks.
  • Carateres iniciais

Outros exemplos:

• 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 can be sorted by those who don't care about date format and by those who prefer [[YYYY-MM-DD]].
• Pokémon table – Place a "#" before numbers to position them ahead of "-".
• Nuclear power by country (Lista em Destaque)
• w:Desert Island Discs: castaways' choices
• zh:秘鲁行政区划 (Subdivisões do Peru) para ordenação em chinês (CJK)
• w:Standard electrode potential (data page)