javascript/sortabletable/usage - Fate/Grand Order @wiki 【FGO】

javascript/sortabletable プラグイン

概要

• 表に並べ替え機能を付加するjavascriptプラグインです。
• optionでフィルター機能も付加できます
  
• オリジナルからいくつか改良しているので同プラグインを導入しているwicurioとは多少仕様が異なります

参考

taruのメモ帳ページ
PukiWikiで表をソートしたい | OXY NOTES

使い方

#include(javascript/sortabletable)

とページ内で入力するとページ内でプラグイン機能を使えるようになります

#divclass(sortabletable){{
#divclass(option){ソート属性[Number|String|Date|CaseInsensitiveString],動作モード[1～3]}
  表のwiki構文
}}

表を上記のように括るとフィルター機能が付加されます
またoptionの{}内に,区切りで以下のパラメーターを入力することで、動作を変更できます

• ソート属性
  列ごとに|で区切って指定します。下記の基準で各セルを評価して並べ替えやフィルターを行います。
  • Number :数値として評価します
  • String :文字列として評価します
  • Date :[西暦/月/日 時:分:秒]形式の日付として評価します
  • CaseInsensitiveString :文字列を大文字と小文字を区別して評価します
  • None :この列は評価しません

• 動作モード
  • 0 : フィルタ機能を無効にする
  • 1 : フィルタ機能を有効にする
  • 2 : フィルタ機能を無効にする＆複数行単位で並べ替え機能を有効にする
  • 3 : フィルタ機能＆複数行単位で並べ替え機能を有効にする

ソート属性の順番はセル結合がある場合下記のようになります

#divlcass(option){1|2|3|4|5|6|7,3}
|1|2|>|3|4|
|~|5|6|7|~|

ソート属性がNumberの列ではinput入力欄に以下の比較演算子を使用できます

比較演算子	入力例	効果
=	=100	値が100なら表示
>=	100>=	値が100以下なら表示
>	>100	値が100以上なら表示
<	<100	値が100未満なら表示
<=	<=100	値が100以下なら表示
!	!100	値が100でないなら表示

使用例

• 動作モード0～１ならtable_filterプラグインが使える

  #divclass(sortabletable,zeb2){{
  #divclass(option){Number|String|CaseInsensitiveString|Date|None,1}
  #table_filter(){No=show,Name=show,Case=show,Date=show,Disable=show}
  |~No|~Name|~Case|~Date|~Disable|h
  |0|アルテラ|Abc|2000/01/15|Abc|
  |11|アルテラ|abc|1999/12/15 12:00:00|abc|
  |2|アルテラ2|Bbc|1999/12/15|Bbc|
  |12|アルテラ2|bbc|2015-08-01 23:00:00|bbc|
  }}
  

  Number|String|CaseInsensitiveString|Date|None,1

  No Name Case Date Disable

  No	Name	Case	Date	Disable
  0	アルテラ	Abc	2000/01/15	Abc
  11	アルテラ	abc	1999/12/15 12:00:00	abc
  2	アルテラ2	Bbc	1999/12/15	Bbc
  12	アルテラ2	bbc	2015-08-01 23:00:00	bbc

• 動作モード0～1でtable_filterを使わない場合はヘッダー行のセル結合ができる

  #divclass(sortabletable,zeb2){{
  #divclass(option){Number|String|None|None|CaseInsensitiveString|Date|String,1}
  |~No|~Name|>|~Merged|~Disable|h
  |~|~|~Case|~Date|~Enable|h
  |0|アルテラ|Abc|2000/01/15|Abc|
  |11|アルテラ|abc|1999/12/15 12:00:00|abc|
  |2|アルテラ2|Bbc|1999/12/15|Bbc|
  |12|アルテラ2|bbc|2015-08-01 23:00:00|bbc|
  }}
  

  Number|String|None|None|CaseInsensitiveString|Date|String,1

  No	Name	Merged		Disable
  		Case	Date	Enable
  0	アルテラ	Abc	2000/01/15	Abc
  11	アルテラ	abc	1999/12/15 12:00:00	abc
  2	アルテラ2	Bbc	1999/12/15	Bbc
  12	アルテラ2	bbc	2015-08-01 23:00:00	bbc

• 動作モード2～3ならセル結合が使える
  ヘッダー行と項目行が1対1で対応するようにしないとうまくソートできない

  #divclass(sortabletable,zeb2){{
  #divclass(option){Number|String|CaseInsensitiveString|Date|None|Number|CaseInsensitiveString|Date|None,3}
  |~No|~Name|~Case1|~Date1|~Disable|h
  |~No2|~|~Case2|~Date2|~Disable2|h
  |0|アルテラ|Abc|2000/01/15|Abc|
  |11|~|abc|1999/12/15 12:00:00|abc|
  |2|アルテラ2|Bbc|1999/12/15|Bbc|
  |12|~|bbc|2015-08-01 23:00:00|bbc|
  }}
  

  Number|String|CaseInsensitiveString|Date|None|Number|CaseInsensitiveString|Date|None,3

  No	Name	Case1	Date1	Disable
  No2		Case2	Date2	Disable2
  0	アルテラ	Abc	2000/01/15	Abc
  11		abc	1999/12/15 12:00:00	abc
  2	アルテラ2	Bbc	1999/12/15	Bbc
  12		bbc	2015-08-01 23:00:00	bbc