Jump to content

Help:ソート可能な表

From mediawiki.org
This page is a translated version of the page Help:Sortable tables and the translation is 76% complete.
Languages:
PD 注意: このページを編集すると、編集内容が CC0 のもとで公開されることに同意したと見なされます。詳細はパブリック・ドメインのヘルプ ページを参照してください。 PD

ソート可能な表を作成するには、表に sortable クラスを追加します。 このクラスを追加すると、各ヘッダー セル内のヘッダーの横に矢印が表示されます。 (下記の例を参照) 矢印をクリックすると、選択した列に基づいて表の行が並び替えられます。 矢印を連続してクリックすると、次のパターンで並び順が変わります。昇順、降順、ソートなし。 異なる列の矢印を Shift キーを押しながらクリックすると、二次的な並び替えが行えます。

Shift キーを押しながらの各クリックで、クリックされた列に基づいた二次的な並び替えが行われます。この機能は三次およびそれ以上の並び替えにも適用されます。

ソートのモード

項目は、ヘッダーの下の最初の数行のデータ型に基づいて並べ替えられます。 データ型を決定するために、ページの読み込み時にヘッダーの下にある最初の 5 つの空ではない行が調べられ、最適な形式が選択されます。 矛盾が発生することがあります。 さらに、特定の列では、下記の関連する節で説明されているように、ソート順を強制できます。

現在、span や sup のようなタグはデータ型の決定に影響しませんが、参照番号や表示されるコメントは影響します。

日時

さまざまな日付の書式に対応しています。各地域の言語での月名を含む書式にも対応しています。 例えば、ドイツ語版ウィキペディアでは「16. März 2010」は「2010-03-16」として適切にソートされます。

ピリオド、カンマ、アポストロフィ、スラッシュ (. , ' /) のようなさまざまな区切り文字を含むさまざまな数値の書式に対応しています。 英語版ウィキペディアは通常、米国の日付書式を使用します (例: month-day-year 月-日-年)。

数字

スクリプトは、小数点として「.」「,」を使用した数値や、「e」「E」を使用した科学的表記の数値も検出できます。 デフォルトでは、数字は英数字順にソートされます。つまり、数値ではなく文字列としてソートされます。 これにより、「9」が「10」の後に来るなど、予期しない並び順になる可能性があります。 ただし、このデフォルトの動作は必要に応じて上書きできます。

テキスト

MediaWikiによってリストがアルファベット順にソートされる場合、文字の順序はIntl.Collatorによってソートされます。 これにより、アクセント付き文字が PageContentLanguage に基づいて正しく並べ替えられます。

Android Webviews はこれをサポートしていないため、古いソートルーチンへのフォールバックが必要です。 順序は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 Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š
š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ Ə ƒ Ǻ ǻ Ǽ
ǽ Ǿ ǿ Ș ș Ț ț ə ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ΄ ΅ Ά · Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ
Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν
ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В
Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж
з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ
ћ ќ ѝ ў џ Ґ ґ Ḃ ḃ Ḋ ḋ Ḟ ḟ Ṁ ṁ Ṗ ṗ Ṡ ṡ Ṫ ṫ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ỳ ỳ – — ― ‗ ‘ ’ ‚
‛ “ ” „ † ‡ • … ‰ ′ ″ ‹ › ‼ ‾ ⁄ ⁿ ₣ ₤ ₧ € ℅ ℓ № ™ Ω ℮ ⅛ ⅜ ⅝ ⅞ ← ↑ → ↓ ↔
↕ ↨ ∂ ∆ ∏ ∑ − ∕ ∙ √ ∞ ∟ ∩ ∫ ≈ ≠ ≡ ≤ ≥ ⌂ ⌐ ⌠ ⌡ ─ │ ┌ ┐ └ ┘ ├ ┤ ┬ ┴ ┼ ═ ║
╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟ ╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬ ▀ ▄ █ ▌ ▐ ░ ▒ ▓ ■
□ ▪ ▫ ▬ ▲ ► ▼ ◄ ◊ ○ ● ◘ ◙ ◦ ☺ ☻ ☼ ♀ ♂ ♠ ♣ ♥ ♦ ♪ ♫ fi fl �
  ISO 基本ラテン アルファベット
  ギリシャ文字
  ロシア語キリル文字アルファベット

列のソートモードを指定する

ヘッダーに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="..."を使用します。

例

1列目では単純に数字をソートします。 2列目では、ヘッダーにも書かれているdata-sort-type="number"を使用して、単位などのついたセルを数字として並べ替えます。 4列目は、セルの内容に関係なく、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を使って2回目のソートを行います。 これは列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

いくつかの行をまとめる

列のない行を、列に沿っている行の下に常にソートされるようにするには、class="expand-child"を列の属性に使用します。

ウィキテキスト 

{| class="wikitable sortable"
!style="width:9em"| 国 !!data-sort-type="number"| 面積
|-
| フランス
| 674 843 km²
|- class="expand-child" style="font-size:85%; line-height:1.2; color:gray"
|colspan="2"| パリにはエッフェル塔があります。
|-
| イギリス
| 242 495 km²
|- class="expand-child" style="font-size:85%; line-height:1.2; color:gray"
|colspan="2"| イギリスではユーロで支払えません。
|- class="expand-child" style="font-size:85%; line-height:1.2; color:gray"
|colspan="2"| さらに、車は道路の左側通行です。
|-
| ドイツ
| 357 168 km²
|- class="expand-child" style="font-size:85%; line-height:1.2; color:gray"
|colspan="2"| ドイツにはかつての東ドイツ (DDR) も含みます。
|}

表示結果

国 面積
フランス 674 843 km²
パリにはエッフェル塔があります。
イギリス 242 495 km²
イギリスではユーロで支払えません。
さらに、車は道路の左側通行です。
ドイツ 357 168 km²
ドイツにはかつての東ドイツ (DDR) も含みます。

data-sort-valueに上の行と同じ内容を入力すると、それらの行はまとめられます。 まとめられた行は元の順序が維持されます。 クラス「expand-child」を使用することもできます。上述の#いくつかの行をまとめるを参照して下さい。

以下はdata-sort-valueを利用したオランダについての例です。 

{|class="wikitable sortable"
! 国/州 !! 首都
|-
| フランス || パリ
|-
| オランダ || アムステルダム
|-
|data-sort-value="オランダ"| 南ホラント州 ||data-sort-value="アムステルダム"| デン・ハーグ
|-
| イギリス || ロンドン
|}
国/州 首都
フランス パリ
オランダ アムステルダム
南ホラント州 デン・ハーグ
イギリス ロンドン

Special dates

西暦以前の年(紀元前)を表すには、10,000から西暦より前の分の年を引きます。 例えば-62 BCE(紀元前62年)の場合、10,000 - 62 = 9938のようになります。

そして紀元前62年9月23日は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"
|-
! 日付
|-
| 2022-01-01
|-
| 2023-12-31
|-
| 2024
|-
| 2024-04
|-
| 2024-04-00
|-
| 2024-05
|-
| 2024-05-00
|}

Rendering

日付
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 :

入力された日時 テキスト 日時の解釈、非表示のソートキーを含む ソートキーを表示した入力 非表示のソートキーがある入力 UNIX 日時
010203 &301762909323 12 11月 2025 01:02:03 &301762909323 010203 &301762909323 010203 1762909323
1/2 &301735776000 02 1月 2025 00:00:00 &301735776000 1/2 &301735776000 1/2 1735776000
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
20251112195321 &301762977201 12 11月 2025 19:53:21 &301762977201 20251112195321 &301762977201 20251112195321 1762977201
yesterday &301762819200 11 11月 2025 00:00:00 &301762819200 yesterday &301762819200 yesterday 1762819200
today &301762905600 12 11月 2025 00:00:00 &301762905600 today &301762905600 today 1762905600
tomorrow &301762992000 13 11月 2025 00:00:00 &301762992000 tomorrow &301762992000 tomorrow 1762992000
1week &301763582001 19 11月 2025 19:53:21 &301763582001 1week &301763582001 1week 1763582001
-1week &301762372401 05 11月 2025 19:53:21 &301762372401 -1week &301762372401 -1week 1762372401
1day &301763063601 13 11月 2025 19:53:21 &301763063601 1day &301763063601 1day 1763063601
-1day &301762890801 11 11月 2025 19:53:21 &301762890801 -1day &301762890801 -1day 1762890801
1month &301765569201 12 12月 2025 19:53:21 &301765569201 1month &301765569201 1month 1765569201
-1month &301760298801 12 10月 2025 19:53:21 &301760298801 -1month &301760298801 -1month 1760298801
1year &301794513201 12 11月 2026 19:53:21 &301794513201 1year &301794513201 1year 1794513201
-1year &301731441201 12 11月 2024 19:53:21 &301731441201 -1year &301731441201 -1year 1731441201
1000year &333319886001 12 11月 3025 19:53:21 &333319886001 1000year &333319886001 1000year 33319886001
10000month &328060286001 12 3月 2859 19:53:21 &328060286001 10000month &328060286001 10000month 28060286001
1000000day &388162977201 10 10月 4763 19:53:21 &388162977201 1000000day &388162977201 1000000day 88162977201
10000000hour &337762977201 30 8月 3166 11:53:21 &337762977201 10000000hour &337762977201 10000000hour 37762977201
1000000000minute &361762977201 12 3月 3927 06:33:21 &361762977201 1000000000minute &361762977201 1000000000minute 61762977201
100000000000second &401762977201 28 9月 5194 05:40:01 &401762977201 100000000000second &401762977201 100000000000second 101762977201
7980year &Expression error: Unexpected < operator. エラー: #time が対応しているのは 9999 年までです。 &Expression error: Unexpected < operator. 7980year &Expression error: Unexpected < operator. 7980year エラー: #time が対応しているのは 9999 年までです。
-1890year &242120279601 12 11月 0135 19:53:21 &242120279601 -1890year &242120279601 -1890year -57879720399
Mon &301763337600 17 11月 2025 00:00:00 &301763337600 Mon &301763337600 Mon 1763337600
Tue &301763424000 18 11月 2025 00:00:00 &301763424000 Tue &301763424000 Tue 1763424000
Wed &301762905600 12 11月 2025 00:00:00 &301762905600 Wed &301762905600 Wed 1762905600
Thu &301762992000 13 11月 2025 00:00:00 &301762992000 Thu &301762992000 Thu 1762992000
Fri &301763078400 14 11月 2025 00:00:00 &301763078400 Fri &301763078400 Fri 1763078400
Sat &301763164800 15 11月 2025 00:00:00 &301763164800 Sat &301763164800 Sat 1763164800
Sun &301763251200 16 11月 2025 00:00:00 &301763251200 Sun &301763251200 Sun 1763251200
&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.

関連項目:

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
日付 名前 身長
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.

例:

Country Capital
フランス パリ
Z M
Sorting with respect to the first column this row sorts like Z, with respect to the second column like M
イギリス ロンドン

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
国 首都
オランダ アムステルダム (ハーグが政府の所在地であるにもかかわらず)
フランス パリ

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 .

関連項目

その他の例:

Retrieved from "https://www.mediawiki.org/w/index.php?title=Help:Sortable_tables/ja&oldid=7820955"