Fandom


ヘルプ
このヘルプには更新、または翻訳されていないコンテンツがあります。どなたでも翻訳にご協力いただくことができます。
原文 : w:Help:Sorting

ソータブル・テーブル (Sortable table)、あるいはソート (並べ替え) 可能なテーブルには、テーブルの列を指定されたカラムの値をもとにして(三角形のボタンで) ソートできる機能があります。これは class="sortable" を追加することで適用できます。

ソータブル・テーブルは、並べ替えに JavaScript を使用しており、現在モバイルスキンでは機能しませんので、ご注意ください。

ソータブル・テーブルの作成 編集

ソータブル・テーブルは "sortable" クラスを追加するだけでできるので、簡単です。ただし、数字やテーブルのフッターを使用したソートのなどの場合には、このページの下部でご紹介しているように追加の入力が必要なものもあります。

{| class="article-table sortable"
!名
!姓
!お気に入りの色
|-
|Ben
|Benny
|茶色
|-
|John
|Smith
|緑色
|-
|Smith
|John
|栗色
|}

は次のようになります:

お気に入りの色
Ben Benny 茶色
John Smith 緑色
Smith John 栗色

ヘッダー部分の三角をクリックすると、アルファベット順または数字順で並べ替えができます。複数の列でソートしたい場合には、 Shift を押した状態で、2つ目の列を選択してください。

高度なソーティング 編集

data-sort-type 編集

デフォルトでは、カラムはASCIIコード順にソートされます。これはソート対象が英字のみの場合には問題になりませんが、10, 20, 100 のような数字をソートするときには、数値よりも最初の文字がまずソートされるため、 10, 100, 20 としてソートされるという問題が起こります。この場合、ヘッダーに "data-sort-type" 属性を使用すればある程度解決することができます。

ただし漢字の読みが複数ある日本語については、この方法では正しくソートできるとは限りません。正しくソートするには、"data-sort-value"を使う必要があります。

data-sort-type="..." には多数のいろいろな値を指定できますが、下記のものがもっともよく使われます:

  • text
  • number - 数値、小数点、カンマ、スペース、"+"、"-" のいずれかの入力を要する
  • currency - 通貨。接頭辞として $, £, €, ¥ をつけた数値の入力を要する (例: $100, ¥10000)
  • date

もしカラムにある各セルに正しい値が入力されていないと、カラム全体のソートが既定に戻ってしまうので、ご注意ください。

例:

{| class="article-table sortable"
!デフォルト
!data-sort-type="number"|数値
!data-sort-type="currency"|通貨
|-
|!@#$%
|10
|$23
|-
|10000
|20
|¥54
|-
|Apple
|100
|£345
|-
|Banana
|200
|€999
|}

これは次のようになります:

デフォルト 数値 通貨
!@#$% 10 $23
10000 20 ¥54
Apple 100 £345
Banana 200 €999

data-sort-value 編集

カラムに表示したいものがソートしたい順序にならないことがあります。このようなケースでは data-sort-value="..." を使います。

例:

{| class="article-table sortable"
!ゲームコンソール
!色
!在庫
|-
|Dreamcast
|data-sort-value="しろ"|白
| data-sort-value="5"|Five
|-
|iPad
|data-sort-value="しろ"|白
| data-sort-value="0"|Zero
|-
|Xbox
|data-sort-value="みとり"|緑
| data-sort-value="8"|Eight
|}

これは次のようになります:

ゲームコンソール 在庫
Dreamcast Five
iPad Zero
Xbox Eight

日本語のソート 編集

漢字や特殊な読み、濁音、カタカナ、ひらがな、長音、拗音などが混じった日本語をソートするときは、カテゴリのソートキーと同様に、 data-sort-value の値として濁音などがないひらがなを指定すると正しくソートすることができます。

{| class="article-table sortable"
!文字列
|-
| data-sort-value="やまとのくに"|大和国
|-
| data-sort-value="おおきみ"|大王
|-
| data-sort-value="たいおうちよう"|大王町
|-
| data-sort-value="おおいた"|大分
|-
| data-sort-value="たいにつほんていこく"|大日本帝國
|-
| data-sort-value="おおきい"|大きい
|-
| data-sort-value="たいよう"|大洋
|-
| data-sort-value="たいまん"|怠慢
|-
| data-sort-value="たいやき"|鯛焼き
|-
| data-sort-value="たいおうこく"|タイ王国
|-
| data-sort-value="たいなまいと"|ダイナマイト
|}

これは次のようになります:

文字列
大和国
大王
大王町
大分
大日本帝國
大きい
大洋
怠慢
鯛焼き
タイ王国
ダイナマイト

ソートできないカラム 編集

特定の列をソートできないように設定する場合には、そのヘッダに "unsortable" クラスを追加することでソートを抑制できます。

例:

{| class="article-table sortable"
|-
!ゲーム
!テーマ
! class="unsortable" |レーティング
|-
|Pocket League Story
|futbol
|☆☆
|-
|Game Dev Story
|vidya gamez
|☆☆☆
|-
|Grand Prix Story
|cars
|☆
|}

これは次のようになります:

ゲーム テーマ レーティング
Pocket League Story futbol ☆☆
Game Dev Story vidya gamez ☆☆☆
Grand Prix Story cars

テーブルのフッター 編集

テーブルの最下端の行 (例えば「合計」行など) をソートしたくないときには、その行に class="sortbottom" を追加することでその列のソートを抑制できます。

例:

{| class="article-table sortable"
!名前
!性別
!年齢
|-
|Amanda
|Female
|12
|-
|Bill
|Male
|23
|-
|Cathryn
|Male
|34
|- class="sortbottom"
!colspan="2"|平均年齢
|23
|}

は次のようになります:

名前 性別 年齢
Amanda Female 12
Bill Male 23
Cathryn Male 34
平均年齢 23

関連情報 編集

その他のヘルプとフィードバック 編集

特に記載のない限り、コミュニティのコンテンツはCC-BY-SA ライセンスの下で利用可能です。