本家PukiWiki 1.4.7で表を作り、昇順・降順で並び替える。

plusバージョンではプラグインが使えるが、本家では改造が必要で非常に大変だった。さらにファイルのリンクが細切れで必要なファイルを集めるのも大変だった。

長々経緯や愚痴を書いてもしょうがないので早速方法を書こう。

1.まず「pukiwiki.ini.php」の

define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 1);

これを

define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0);

このように変更し複数行プラグインを利用可能にする。

2.「sortabletable.inc.php」（ここでは既に変更済みのものをアップロードしている。）

$head_tags[] = '<script charset="utf-8" type="text/javascript" src="' . SKIN_URI . 'sortabletable.js"></script>'; $head_tags[] = '<script charset="utf-8" type="text/javascript" src="' . SKIN_URI . 'filterabletable.js"></script>';

これを

$head_tags[] = '<script charset="utf-8" type="text/javascript" src="' . SKIN_DIR . 'sortabletable.js"></script>'; $head_tags[] = '<script charset="utf-8" type="text/javascript" src="' . SKIN_DIR . 'filterabletable.js"></script>';

このように変更。

3.「skinフォルダ」に「sortabletable.js」「filterabletable.js」を追加。

4.「imageフォルダ」に「blank.png」「downsimple.png」「upsimple.png」をファイルを追加。

これは自分で作成する必要がある。それぞれ「blank.png」選ばれてない状態。「downsimple.png」下向き（降順）。「upsimple.png」上向き（昇順）。となる。

5.「skin/pukiwiki.css.php」の最後に

/*sortabletable.js*/
 .sort-arrow {
 width: 17px;
 height: 17px;
 background-position: center center;
 background-repeat: no-repeat;
 margin: 0 2px;
 background-image: url("../image/blank.png");
 }
 .sort-arrow.descending {
 background-image: url("../image/downsimple.png");
 }
 .sort-arrow.ascending {
 background-image: url("../image/upsimple.png");
 }
 /*filterabletable.js*/
 .filter-box {
 width: 100%;
 height: 1.5em;
 margin: 0;
 }

を追加。微調整は普通にCSSを編集するようにすれば問題ない。

実際にWikiへの記述は

#sortabletable(sort=String|Number){{
|LEFT:80|LEFT:150|c
 |果物|価格|h
 |林檎|25|
 |オレンジ|5|
 |梨|20|
 |マンゴー|500|
 }}

このように「#sortabletable(){{}}」と指定すれば出来る。「sort=」の部分の「Number」は数字の整列に、「String」は文字列の整列に使える。「h」とはヘッダーのことだ。

実際の使用例はこちら（円など文字列が加わるとソート出来ないため現在は使ってない）

更に2番目のオプションに「1」を加えるとフィルタが使える。「#sortabletable(sort=Number|Number,1)」このように記述すると「Enable Filter」というチェック項目が出る。要約するとエクセルにおけるプルダウンメニューによる絞り込み機能だ。

複雑で大量のリストを扱う際などとても利便性の高い機能だ。

参考にさせていただいたサイト

http://taru.s223.xrea.com/index.php?diary%2F2006-11-08
http://taru.s223.xrea.com/index.php?Note%2Fdiary%2F2006-11-08

追記
「◯◯円」や「◯◯cm」など文字列が追加されると正常に動作しない。
純粋な数字のみか、文字列でのソートで正常に動作する。
現状では使用したいページには使えない。

そのためこのプラグインを参考に「tablekit.js」を使用したプラグインを作った。

記事はこちら