Jump to content

帮助:可排序表格

From mediawiki.org
This page is a translated version of the page Help:Sortable tables and the translation is 49% complete.

通过在表格中添加sortable式样来创建可排序表格。 该式样将在每个表头格的标题旁增加箭头图示。 (参见下面的例子。) 当您点击其中的一个箭头,表格的行将会按照所选的列进行排序。 连续点击这个箭头将会按以下顺序改变排序原则:升序(自小到大)、降序(自大到小)和不排序(原顺序)。 您也可以通过按住shift并点击不同列的箭头来实现二阶排序。

每按一次Shift并点击,都会基于所点击的列设置次要排序,而且此功能还可扩展到第三级及更高级别的排序。

排序模式

条目是根据标题下方前几行的数据类型进行排序的。 为了确定数据类型,在页面加载时会检查标题下方的前五行非空行,并选择最合适的格式。 可能会出现差异。 此外,特定列可以强制其排序顺序,下方相关部分中对此进行了说明。

目前,像spansup这样的标签不会影响数据类型的确定方式,但引用编号和可见注释会产生影响。

日期

不同的日期格式都是可接受的,甚至包括那些月份名称为当地语言的格式。 例如,在德语维基百科上,“16. März 2010”被正确排序为2010-03-16。

支持不同的数字格式,包括带有各种分隔符(如句点、逗号、撇号或斜杠)的格式(例如 . , ' /)。 英文维基百科通常使用美国日期格式(例如:月-日-年)。

數字

该脚本能够检测使用“.”或“,”作为小数分隔符的数字,以及采用科学计数法(使用“e”或“E”)表示的数字。 默认情况下,数字将按照字母数字顺序进行排序,这意味着它们将被视为字符串而非数值进行排序。 这可能导致意外的排序结果,例如“9”排在“10”之后。 然而,若有意愿,这一默认行为是可以被覆盖的。

文本

当列表由MediaWiki按字典序排序时,字符的顺序以Intl.Collator排序。 这会根据PageContentLanguage正确地对重音字符进行排序。

Android Webview不支持此功能,因此需要回退到旧的排序例程。 该顺序与Unicode代码点的顺序相同。 一些较常见的字符的排序如下(以升序排列):

 
! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C
D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g
h i j k l m n o p q r s t u v w x y z { | } ~
 
¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬
­
® ¯ ° ± ² ³ ´ µ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð
Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô
õ ö ÷ ø ù ú û ü ý þ ÿ Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę
ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ
Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š
š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ Ə ƒ Ǻ ǻ Ǽ
ǽ Ǿ ǿ Ș ș Ț ț ə ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ΄ ΅ Ά · Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ
Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν
ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В
Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж
з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ
ћ ќ ѝ ў џ Ґ ґ
Ω

强制列排序模式

在表头中增加data-sort-type="..."将可以控制表格的排序方式。 该特性源于tablesorter.com (网页存档)。 "data-sort-type"参数的取值包含以下(大小写不敏感):

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

例如:

维基文本

{|class="wikitable sortable"
!data-sort-type="date"| 日期 !! 姓名 !! 身高 !!data-sort-type="number"| 薪资
|-
| 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
|}

渲染效果

日期 姓名 身高 薪资
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

指定排序的键

在有必要的情况下,您也可以调整单元格的排序或分析方式。 例如,当单元格包含内容"John Smith"却需要以"Smith"排序时,您可以通过设置参数data-sort-value="..."来实现。

维基文本

{|class="wikitable sortable"
! 名与姓 !! 身高
|-
|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
|}

渲染效果

名与姓 身高
John Smith 1.85
Ian Ray 1.89
Zachary Bianchi 1.72

控制排序与显示

使用参数data-sort-type="..."可以使文字不参与排序但仍然显示。 您可以在值后面增加额外的文字,例如“大约200”或者“100[1]”。 空的单元格按照"-Infinity"排序。 如果单元格包含了日期或数字范围(例如“从2到5”),则使用data-sort-value="..."

示例

第一列按纯数字进行排列。 第二列使用表头中的data-sort-type="number"参数对数字包含更多内容的情况进行排序。 第四列使用data-sort-value="..."参数独立的定义了单元格的数字排序值。

数字 data-sort-type="number" data-sort-type="number"
-8e3 -8 e3 -8 e3
-3e-3 -3 e-3 -3 e-3
2.000 2-5 km² data-sort-value="3.5" 2-5 km²
3.99 3.99 km² 3.99 km²
4 4 km² 4 km²
90 % 90 Percent data-sort-value="90" about 90 Percent
1E2 100[1] 100[1]
1,000,000.0 1 000 000.0 data-sort-value="1e6" one Million

逗号(,)和小数点(.)的显示方式因语言设定而异。 货币符号和百分比符号(%)会依据这些设置按数值进行排序。

货币
$ 9
$ 80
$ 70
$ 600
货币
9 €
80 €
70 €
600 €
货币
£ 9
£ 80
£ 70
£ 600
货币
¥ 9
¥ 80
¥ 70
¥ 600
百分比
9 %
80 %
70 %
600 %
数字
−7e270
-1.4285714285714E-13
999e9
7e270

二次排序

您可以在按列排序数据时使用列A为排序主键。 当列A中出现相等值时,使用列B作为次要键。 点击列A的排序键一次或两次,然后按住shift键并点击列B的排序键一次或两次,即可实现进一步的细化排序。

例如:

首先点击“文本”列,然后按住shift键并点击“数字”列。 您将可以注意到条目被按照先文本再数字的顺序排列。

数字 文本 日期 货币 更多文本
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
底部

额外特性

排序时排除最后一行

可以通过使用class="sortbottom"标记来跳过对表格最后一行的排序。 同样也可以使用感叹号(!)将其定义为表尾以排除出排序。

维基文本

{|class="wikitable sortable"
! 名 !! 姓 !! 身高
|-
| John || Smith || 1.85
|-
| Ron || Ray || 1.89
|-
| Mario || Bianchi || 1.72
|- class="sortbottom"
! !! 平均: || 1.82
|}

页面呈现

身高
John Smith 1.85
Ron Ray 1.89
Mario Bianchi 1.72
平均: 1.82

排序时排除第一行

可以通过使用class="sorttop"将表格第一行排除出排序。

维基文本

{|class="wikitable sortable"
! 名 !! 姓 !! 身高
|- class="sorttop"
! !! 平均: || 1.82
|-
| John || Smith || 1.85
|-
| Ron || Ray || 1.89
|-
| Mario || Bianchi || 1.72
|}

页面呈现

身高
平均: 1.82
John Smith 1.85
Ron Ray 1.89
Mario Bianchi 1.72

将列标记为不可排序

在表头单元格中使用class="unsortable"属性可以阻止该列被排序。

维基文本

{|class="wikitable sortable"
! 数字 !! 字母 !! 日期 !! 货币 !!class="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?
|-
! 合计: 15 !! !! !! 合计: 29.55 !!
|-
|}

页面呈现

数字 字母 日期 货币 不可排序
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?
合计: 15 合计: 29.55 Original example

Keeping some rows together

To allow an uncolumned row to always stay beneath the columned row above it, no matter how you sort them, use class="expand-child" in the row's attribute.

Wikitext

{| 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.
|}

Rendering

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.

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"
! 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

To represent years Before the Common Era (BCE) subtract the BCE year from 10,000. For instance, -62 BCE would be 10,000 - 62 = 9938.

For example, September 23, 62 BCE would be represented as 9938-09-23.

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.

Wikitext

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

Rendering

Date
2022-01-01
2023-12-31
2024
2024-04
2024-04-00
2024-05
2024-05-00

Using #time

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.

For example using date :

input date text date and time as interpreted, with hidden sort key input with visible sort key input with hidden sort key Unix time
010203 &301778720523 14 5月 2026 01:02:03 &301778720523 010203 &301778720523 010203 1778720523
1/2 &301767312000 02 1月 2026 00:00:00 &301767312000 1/2 &301767312000 1/2 1767312000
1/2/3 &301041465600 02 1月 2003 00:00:00 &301041465600 1/2/3 &301041465600 1/2/3 1041465600
1-2-2003 &301044057600 01 2月 2003 00:00:00 &301044057600 1-2-2003 &301044057600 1-2-2003 1044057600
1-2-3 &300981158400 03 2月 2001 00:00:00 &300981158400 1-2-3 &300981158400 1-2-3 981158400
2007 &301167609600 01 1月 2007 00:00:00 &301167609600 2007 &301167609600 2007 1167609600
1 Jan 111, 00:00:00 &241335609600 01 1月 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 12月 9999 23:59:59 &553402300799 31 Dec 9999, 23:59:59 &553402300799 31 Dec 9999, 23:59:59 253402300799
Sep 1970 &300020995200 01 9月 1970 00:00:00 &300020995200 Sep 1970 &300020995200 Sep 1970 20995200
1970 &300000000000 01 1月 1970 00:00:00 &300000000000 1970 &300000000000 1970 0
Jun 2007 or later &301180656000 01 6月 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 6月 2007 00:00:00 perhaps earlier &301180656000 Jun 2007 perhaps earlier &301180656000 Jun 2007 perhaps earlier 1180656000 perhaps earlier
2007-6 &301180656000 01 6月 2007 00:00:00 &301180656000 2007-6 &301180656000 2007-6 1180656000
Jun 2007 &301180656000 01 6月 2007 00:00:00 &301180656000 Jun 2007 &301180656000 Jun 2007 1180656000
4 Jun 2007 &301180915200 04 6月 2007 00:00:00 &301180915200 4 Jun 2007 &301180915200 4 Jun 2007 1180915200
3 Jul 2007 &301183420800 03 7月 2007 00:00:00 &301183420800 3 Jul 2007 &301183420800 3 Jul 2007 1183420800
12 Aug 2006 &301155340800 12 8月 2006 00:00:00 &301155340800 12 Aug 2006 &301155340800 12 Aug 2006 1155340800
1 Mar 2006 -1day &301141084800 28 2月 2006 00:00:00 &301141084800 1 Mar 2006 -1day &301141084800 1 Mar 2006 -1day 1141084800
1 Mar 2008 -1day &301204243200 29 2月 2008 00:00:00 &301204243200 1 Mar 2008 -1day &301204243200 1 Mar 2008 -1day 1204243200
1 Mar 2010 -1day &301267315200 28 2月 2010 00:00:00 &301267315200 1 Mar 2010 -1day &301267315200 1 Mar 2010 -1day 1267315200
1 Mar 1900 -1day &297796022400 28 2月 1900 00:00:00 &297796022400 1 Mar 1900 -1day &297796022400 1 Mar 1900 -1day -2203977600
1 Mar 1600 -1day &288329001600 29 2月 1600 00:00:00 &288329001600 1 Mar 1600 -1day &288329001600 1 Mar 1600 -1day -11670998400
Jun 1607 &288557875200 01 6月 1607 00:00:00 &288557875200 Jun 1607 &288557875200 Jun 1607 -11442124800
20260514065544 &301778741744 14 5月 2026 06:55:44 &301778741744 20260514065544 &301778741744 20260514065544 1778741744
yesterday &301778630400 13 5月 2026 00:00:00 &301778630400 yesterday &301778630400 yesterday 1778630400
today &301778716800 14 5月 2026 00:00:00 &301778716800 today &301778716800 today 1778716800
tomorrow &301778803200 15 5月 2026 00:00:00 &301778803200 tomorrow &301778803200 tomorrow 1778803200
1week &301779346544 21 5月 2026 06:55:44 &301779346544 1week &301779346544 1week 1779346544
-1week &301778136944 07 5月 2026 06:55:44 &301778136944 -1week &301778136944 -1week 1778136944
1day &301778828144 15 5月 2026 06:55:44 &301778828144 1day &301778828144 1day 1778828144
-1day &301778655344 13 5月 2026 06:55:44 &301778655344 -1day &301778655344 -1day 1778655344
1month &301781420144 14 6月 2026 06:55:44 &301781420144 1month &301781420144 1month 1781420144
-1month &301776149744 14 4月 2026 06:55:44 &301776149744 -1month &301776149744 -1month 1776149744
1year &301810277744 14 5月 2027 06:55:44 &301810277744 1year &301810277744 1year 1810277744
-1year &301747205744 14 5月 2025 06:55:44 &301747205744 -1year &301747205744 -1year 1747205744
1000year &333335650544 14 5月 3026 06:55:44 &333335650544 1000year &333335650544 1000year 33335650544
10000month &328076309744 14 9月 2859 06:55:44 &328076309744 10000month &328076309744 10000month 28076309744
1000000day &388178741744 10 4月 4764 06:55:44 &388178741744 1000000day &388178741744 1000000day 88178741744
10000000hour &337778741744 28 2月 3167 22:55:44 &337778741744 10000000hour &337778741744 10000000hour 37778741744
1000000000minute &361778741744 10 9月 3927 17:35:44 &361778741744 1000000000minute &361778741744 1000000000minute 61778741744
100000000000second &401778741744 29 3月 5195 16:42:24 &401778741744 100000000000second &401778741744 100000000000second 101778741744
7980year &Expression error: Unexpected < operator. 错误:#time只支持9999年及以下的年份。 &Expression error: Unexpected < operator. 7980year &Expression error: Unexpected < operator. 7980year 错误:#time只支持9999年及以下的年份。
-1890year &242136130544 14 5月 0136 06:55:44 &242136130544 -1890year &242136130544 -1890year -57863869456
Mon &301779062400 18 5月 2026 00:00:00 &301779062400 Mon &301779062400 Mon 1779062400
Tue &301779148800 19 5月 2026 00:00:00 &301779148800 Tue &301779148800 Tue 1779148800
Wed &301779235200 20 5月 2026 00:00:00 &301779235200 Wed &301779235200 Wed 1779235200
Thu &301778716800 14 5月 2026 00:00:00 &301778716800 Thu &301778716800 Thu 1778716800
Fri &301778803200 15 5月 2026 00:00:00 &301778803200 Fri &301778803200 Fri 1778803200
Sat &301778889600 16 5月 2026 00:00:00 &301778889600 Sat &301778889600 Sat 1778889600
Sun &301778976000 17 5月 2026 00:00:00 &301778976000 Sun &301778976000 Sun 1778976000
&Expression error: Unexpected < operator. 错误:时间无效。 &Expression error: Unexpected < operator. &Expression error: Unexpected < operator. 错误:时间无效。
unknown &Expression error: Unexpected < operator. 错误:时间无效。 &Expression error: Unexpected < operator. unknown &Expression error: Unexpected < operator. unknown 错误:时间无效。

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.

See also:

Cell spanning multiple rows/cells

A cell that extends across multiple rows or columns is considered equivalent to having multiple cells with identical values.

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

Any missing cells at the end of a row will turn into empty cells after the first sort.

Colspanned cells

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.

For 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

Static column

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.

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

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.

Default order

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.

You can also use Snippets/Sort table on reload to automatically sort the table when it loads using JavaScript.

Persistent sort states using cookies

You can save the state of sortable tables across reloads using Snippets/Persistent sort order .

參見

Other examples: