- このヘルプには更新、または翻訳されていないコンテンツがあります。どなたでも翻訳にご協力いただくことができます。
- 原文 : 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 | |
関連情報[]
- ヘルプ:テーブル
- Help:Sorting - ウィキペディア英語版の記事
その他のヘルプとフィードバック[]
- ヘルプ:コンテンツでは、他のヘルプページを閲覧、検索することができます。
- 最新の情報やヘルプについては、コミュニティセントラルをご覧ください。
- この記事で不明確な点や、曖昧な点がございましたら、Fandomとの連絡方法をご確認ください。
- このヘルプはコミュニティセントラル内にて管理されています。