« 郷土資料館めぐり | Main | DataTablesは何処へ »

2009.06.20

WEB上でソート可能な表を作る

Itiran

当サイトの各市町村古墳一覧は、一つの画面上でなるべく多くの古墳名を表示するのを第一義としているのですが、規模や墳形で並べ替えのできる表があると面白いかもと思い作ってみました。なるべく簡単にと思い探してみると「Data Tables」というJavaScriptライブラリーを利用するのがよさそう。

1.DataTablesのサイトからライブラリーをダウンロード(フリーです)
2.ファイルを展開してできた「media」フォルダをサーバーにアップ
3.HTMLのヘッダーにStyleとScriptタグを追加
4.Table要素をマークアップ。ホームページビルダーなどで作った一般的な表を少し書き換えるだけでとても簡単です。

ここまでは、ASCIIのサイトに詳しい記事があるのでそちらを参照していただくとして、以下私が試したカスタマイズを書いてみます。

・CSSはダウンロードファイルにある「demos.css」を色の変更を除きそのまま利用しました。
・TableのIDは横着して「example」です。
・StyleとScriptタグは以下の通り

<script type="text/javascript" language="javascript" src="http://アップロードしたアドレス/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="http://アップロードしたアドレス/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
  "bStateSave": true,
  "sPaginationType": "full_numbers",
  "aoColumns": [
   null,
   null,
   null,
   { "sType":"html"},
   null,
   null,
   null,
   null,
   null
  ]
} );
} );
</script>
<STYLE type="text/css">
<!--
@import url(../media/css/demos.css);
-->
</STYLE>

1.並び替えを行った場合、その状態を自動的にセーブする機能を追加。(bStateSave": true)たとえば規模順に並び替えて、古墳ページに飛び、戻ってく

ると並び替えた状態が表示される。これを指定しないと初期状態の表が表示されてしまいます。
2.表右下に複数ページの場合のリンクや「NEXT」などのボタンを表示させる。(sPaginationType": "full_numbers) ここで注意しなくてはならないのがBodyタグ内に次ぎの記述をすること。最初はこれがわからず苦労しました。
  <BODY id="dt_example" class="example_alt_pagination">
3.リンクを含む列を並び替えると、アドレス順になってしまうので、これを文字列で並び替えるようにする。(aoColumns)リンクを含む列は{ "sType":"html"}、他はnullを記述します。表左側から記述し、実際の列数と一致しないとエラーになります。

完成した表を太田市、伊勢崎市、前橋市、高崎市、藤岡市、安中市、富岡市の古墳一覧へアップしてみました。
「Search」は便利かも。たとえば「前方」と入力すると前方後円墳や前方後方墳をリストアップしてくて、その状態で並び替えができます。
しかし、行数100くらいまではそこそこ動きますが高崎市みたいに400になるとそうとう重いです。低スペックのPCでは我慢できないかも。それとIEはJavaScriptの処理速度がとても遅い。GoogleChromeやサファリだとかなり快適になります。FireFoxはその中間くらい。
もうひとつ。現存古墳は基本的に未調査のものがほとんどでデータがないものが多いのです。苦労して作る価値があるのか?ということで、これからどういう方向で一覧表を作っていけばいいのか思案中です。

|

« 郷土資料館めぐり | Main | DataTablesは何処へ »

パソコン・インターネット」カテゴリの記事

Comments

Post a comment



(Not displayed with comment.)




« 郷土資料館めぐり | Main | DataTablesは何処へ »