atwikiでjQuery pluginのtablesorterを使ってテーブルをソート対応してみた

対応させる為に必要なファイル

必要なファイルをダウンロードする

これらを作成したwikiから見えるパスへ準備しておく
(今回は同じwiki内へ用意)

概要

atwiki記法でテーブルを書くと、

|項目1|項目2|
|1|2|
|5|3|

table タグでテーブルが作られる

項目1	項目2
1	2
5	3

ソースはこのようになっている

<table>
	<tr><td>項目1</td><td>項目2</td></tr>
	<tr><td>1</td><td>2</td></tr>
	<tr><td>5</td><td>3</td></tr>
</table>

atwiki記法で作られたテーブルは簡易的なものなので、tablesorterに対応させる為、table タグにclass="tablesorter"を追加、thead タグ、 tbody タグを追加、column部分の tr タグ内の td を th へ修正する必要がある。

<table class="tablesorter">
  <thead>
	<tr><th>項目1</th><th>項目2</th></tr>
  </thead>
  <tbody>
	<tr><td>1</td><td>2</td></tr>
	<tr><td>5</td><td>3</td></tr>
  </tbody>
</table>

対応方法

JavaScriptを使い上記の修正を施す、
デモページのソース全文はこちら*1

jQuery plugin tablesorterのデモ

<!-- これが元になるテーブル、atwiki記法で書かれています -->
#divid(tablesorter-src){
|名前|戦闘力|Lv|
|クリ○ン|600|20|
|ゴク○|800|25|
|ピッ○ロさん|780|23|
|ヤム○ャ|380|33|
}


#divid(makeTableButton){
}

<!-- ここにソート対応したテーブルが作られます -->
#divid(tablesorter-dest){
}


// -------------------- ここからしたは弄る必要なし -----------------
#include_js(http://www18.atwiki.jp/worditest/pub/jquery.min.js)
#include_js(http://www18.atwiki.jp/worditest/pub/jquery.tablesorter.js)
#javascript(){
	// ボタン作成
	$("#makeTableButton").append("<input type='button' value='ソート対応のテーブルを作成' onclick='makeTable()' />");

	function makeTable() {

	  // 移動元と移動先のテーブル
	  var src = $("#tablesorter-src").children("table");
	  $("#tablesorter-dest").append("<table>");
	  var dest = $("#tablesorter-dest").children("table");

	  // 移動先テーブルの準備
	  dest.addClass("tablesorter");
	  dest.append("<thead id='tableHead'>");
	  dest.append("</thead>");
	  dest.append("<tbody id='tableBody'>");
	  dest.append("</tbody>");

	  // 移動元から移動先へ
	  srcHead = src.find(".atwiki_tr_1");
	  srcHead.html(srcHead.html().replace(/td/ig, "th"));
	  srcHead.appendTo("#tableHead");
	  src.find("tr").appendTo("#tableBody");

	  // 準備が出来たのでソート対応へ
	  dest.tablesorter({sortList:[[0,0]], widgets: ['zebra']});

	  // 移動後に必要ないものの後始末
	  $("#tablesorter-src").empty();
	  $("#makeTableButton").html("<input type='button' value='作成完了！' disabled />");
	}
}

不満点

セキュリティ上仕方ないかもしれないが、atwikiの編集モードを管理者のみにしていないとJavaScriptが有効にならない、誰でもページを編集出来て、且つセキュリティ維持する良い方法無いだろうか。

*1:JavaScriptを有効にする為には編集権限を管理者のみにする必要があるけど、そうするとソースが読めない為ここに書いておく