FANDOM


可排序的表格可以讓表格的各列依照裡面的數值來排列。這可以藉由 class="sortable" 語法來完成。

注意表格排序使用JavaScript來排序,目前還無法在 手機版網頁使用。


基本

要製作一個可排序的表格很容易,只要加上一個"sortable"的class就可以了。但在特定情形下,會有其他需要注意的問題,以下就一一介紹。

最基本的形式,輸入以下表格

{| class="article-table sortable"
!名
!姓
!最喜歡的顏色
|-
|Ben
|Benny
|Brown
|-
|John
|Smith
|Green
|-
|Smith
|John
|Maroon
|}

會顯示為:

最喜歡的顏色
Ben Benny Brown
John Smith Green
Smith John Maroon

點擊鍵頭即可以進行排序(依照字母)

進階排序

處理資料類別(data-sort-type)

在預設中,每一直行都會依照ASCII 順序來排列。這在大多數的例子中都不會有問題,但在處理數字的時候可能會有問題,例如 10, 20, 100 三個數字,按照預設會以10, 100, 20來排序 (因為這排序方式是先考慮第一個「字元」,再考慮第2個,而不是以數字大小來排)。這種狀況可以在行列開頭使用"data-sort-type" 來解決。

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
|White
| data-sort-value="5"|Five
|-
|iPad
|White
| data-sort-value="0"|Zero
|-
|Xbox
|Green
| data-sort-value="8"|Eight
|}

會顯示為:

主機 顏色 版本
Dreamcast White Five
iPad White Zero
Xbox Green Eight

不要排序的直行

如果你的表格中有一些直行不想要排序。你可以在它的開頭加上"unsortable"這個class。

例如: 輸入以下表格:

{| 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 授权许可。