CardList プラグインをsorttable.jsでソート可能に
FreeStyleWikiのBugTrack-plugin/215のCardList プラグインを改造し、ヘッダをクリックすることで、その列についてのソートができるようにしました。
といっても、sorttable.jsを使用するようにしただけで、改造というのもおこがましい感じ。
インストール
- FreeStyleWikiの本家のサイトのBugTrack-plugin/215の、CardForm プラグインをインストールする。
- 以下から sorttable.js をダウンロードし、plugin/cardform 以下にコピーする。
- 以下の CardList.pm をダウンロードし、plugin/cardform 以下にコピーする。上書きされるので注意!
- CardList.pm(551)
- plugin/cardform/Install.pm の以下の行を修正する。
- 修正前 WIKI
$wiki->add_paragraph_plugin( "cardlist", "plugin::cardform::CardList", "WIKI");
- 修正後 HTML
$wiki->add_paragraph_plugin( "cardlist", "plugin::cardform::CardList", "HTML");
使い方
例えば、以下は、闘うベストテン2007の海外編のベストテン(+次点)の表ですが、ヘッダの「番号」、「作品」、「著者」、「出版社」のセルをクリックすることで、その列について降順、昇順でソートできます。
番号 | 作品 | 著者 | 出版社 |
---|---|---|---|
闘うベストテン2007海外編/1 | デス・コレクターズ | ジャック・カーリイ | 文春文庫 |
闘うベストテン2007海外編/2 | 復讐はお好き? | カール・ハイアセン | 文春文庫 |
闘うベストテン2007海外編/3 | 悪魔はすぐそこに | D・M・ディヴァイン | 創元推理文庫 |
闘うベストテン2007海外編/4 | 血と暴力の国 | コーマック・マッカーシー | 扶桑社ミステリー |
闘うベストテン2007海外編/5 | ハスラー | ウォルター・テヴィス | 扶桑社ミステリー |
闘うベストテン2007海外編/6 | 目くらましの道 | ヘニング・マンケル | 創元推理文庫 |
闘うベストテン2007海外編/7 | 市民ヴィンス | ジェス・ウォルター | ハヤカワ文庫 |
闘うベストテン2007海外編/8 | 真夜中に捨てられる靴 | デイヴィッド・マレル | ランダムハウス講談社文庫 |
闘うベストテン2007海外編/9 | 双生児 | クリストファー・プリースト | 早川書房 |
闘うベストテン2007海外編/10 | 快盗タナーは眠らない | ローレンス・ブロック | 創元推理文庫 |
闘うベストテン2007海外編/11 | 狂人の部屋 | ポール・アルテ | 早川書房 |
バグ?
- テーブルの記載内容によっては、ソートされてるのか、どうなのか、よくわかりません。
- 例えば、テクノ名盤200+αの表を「Artist」とか「Title」でソートすると、ソートされてるんだか、どうなんだか。
- 特別な指定はしてないので、ソート順はalphanumericallyじゃないかと思うんですが、どうもそうは見えない……。
補足
sorttable.jsの配布元のページには、以下のようなCSSの設定を元に make up してね、と書いてありますが、
/* Sortable tables */ table.sortable thead { background-color:#eee; color:#666666; font-weight: bold; cursor: default; }
色はともかく、普通の表と区別でき、クリックできることも示せるので、cursorの設定は「default」ではなく「pointer」に変えた方がいいんじゃないかと思います。
table.sortable thead { cursor: pointer; }
参考
- BugTrack-plugin/215 CardForm:カード型データベースのためのプラグイン群
- このプラグイン群のCardList プラグインを改造しました。ありがとうございます。
- sorttable: Make all your tables sortable as days pass by,by Stuart Langridge
- sorttable.jsの配布元。ありがとうございます。
- ソートできる表を作成するjavascript「sorttable.js」 skuare.net
- このページをみて本改造を思い立ちました。ありがとうございます。