2006年10月10日火曜日

AJAXで表を並び替え！

いやぁ最高ですね。AJAX！　って知ったかぶりをしてみる。

元々興味があったんですが、まぁ時間も無いのでさわらないでいたんです。

で、このたび顧客から「前に納品してもらった表（Webアプリ）に並び替え機能をつけてくれ」って言われたわけです。
いつもだったらQUERYSTRINGにsort=hogeとかやって、SQL文にORDER BYを入れて、、とかやったわけですが、今日の僕は違いました。何てったってやる気のなさが。　前に書いたコードを変えるのもめんどくさいしなぁ　と思っていたところ


テーブルの列でソートするJavaScriptライブラリ:phpspot開発日誌

に出会ったわけです。まぁぐぐったんだけど。

本体のサイトを見に行こうとすると落ちていたので、他のサイトでサンプルが紹介されていたのをちょうだいしてきたわけですが。
二つJSを読み込んで、一行スクリプトを挟むだけで並び替えがぐにゅーっとできちゃうので感動しました！


というわけで少し技術的な話。

  1. prototype.js, order_by_column.jsを読み込む
  2. ソートしたいテーブルにidをつける 例：id="hoge"
  3. テーブルのthがあるtrを<thead></thead> で囲む
  4. テーブルの後に以下のスクリプトを挟む
    <script type="text/javascript">
    new OrderByColumn("hoge",["int","int","string","string","int", "int"]);
    </script>
だけです。10分！intとかstringは並び替えるアルゴリズムの選択ですね。たぶん。（元サイトが落ちていてコードしかみれなくて。。）

ただ一つ落とし穴があって、文字列の並び替えとかは文字コードでやってしまうようなので、こちらのねらったとおりに並び替えはしてくれないんですよね。たぶん。　ただ、どうしようもなくめんどくさかったので、僕は下のようなハックをば。

<!--{$hogeSortOrder|string_format:"%03d"}-->{$hoge}

あ、smartyの話ですけどね。　つまり、並び順を先にコメントで入れておくのです。で、それの桁数だけそろえておく。
これでintで並び替えをかければばっちりうまく行きました。
※何も表示しないところは<!--000-->と入れてみたりして調整しましたが

というわけで何が何でもサーバーサイドで実装しようと思うと、サーバーが重いだけじゃなく開発も重くなっちゃうんですね。これでお客さんも僕もハッピ！



ラベル: ,

Zenback