2008年05月29日

TableKit - HTMLのテーブルで任意の列をソート(並び替え)

ウェブサイト上でデータを一覧表示する場合は、よくテーブルを使います。

商品の基本情報や価格情報等を綺麗に見せる事ができるテーブル構成は、xhtml+cssの方向へ進んでいる今でも普通に使われています。

商品情報一覧を見る際にあると便利なのは価格順に並べ替えたりするソート機能です。

しかし現在のヤフオクもそうですが並び替え(以下ソート)はページ全体を更新している作りが多いようです。

現状、Ajaxを使って非同期でソートしているサイトは、まだそれほどないんですかね。
(もしかしたら私が知らない所で有名サイトがバンバン使っているかもしれませんが・・・^^;)

そこで、今回はテーブルデータのソートを実践してみました。




【prototype】HTMLテーブルにて任意の項目で並べ替えをしてみた

上記サイトにてテストをしました。

使用したライブラリは、今やすっかり有名になっているTableKitというものです。

このライブラリを使うと列データのソート、リサイズ、編集などができます。

私が実際に必要だったのはソートとリサイズだったのでそれらを実装してみました。

使い方はTableKitに書いてあるのですが、非常に簡単です。

0.ファイルのダウンロード
1.jsファイルの読み込みを記述する
2.tableタグへのclass指定をする
3.thead、tbodyの構成を作る
4.thead内のthへclass指定をする


----- 0 -----

まずここからファイルをダウンロードします。


----- 1 -----

head内にjsファイルの読み込みを書きます。


<script type="text/javascript" src="tablekit/scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="tablekit/fastinit.js"></script>
<script type="text/javascript" src="tablekit/tablekit.js"></script>




----- 2 -----

テーブルタグに、使用したい機能の指定を記述します。

ソート・リサイズ・エディットの指定は、class内に

sortable
resizable
editable

を半角スペースで区切って書く事により実行可能になります。

私は編集は必要なかったのでeditableは加えませんでした。


<table class="sortable resizable">




----- 3 -----

theadとtbodyを使って項目部分とデータ部分の区別りを作ります。


----- 4 -----

この4はしてもしなくても今回のテストの場合は同じ結果が得られたのですが、ソートする際にその列のデータ型の指定を指定してみました。

列の値が数値なら


<th class="number" title="クリックで並び替え">ID</td>



文字列なら


<th class="text" title="クリックで並び替え">ID</td>


と指定するようです。

これで設定完了です。

ストレスなく非常にスムーズにソートが出来ますよ。

【prototype】HTMLテーブルにて任意の項目で並べ替えをしてみた


以下参考文献です

Good Sleep: テーブルの列をソートできるようにする
MOONGIFT: » 必見!ソート/編集ができる表ライブラリ「TableKit」
tableのソートや列の幅が変更可能なTableKit
HTMLのテーブルをソートする16の方法

何かしら参考になりましたらクリックをよろしくお願いします
にほんブログ村 IT技術ブログへ   人気ブログランキング    
この記事へのコメント
「以下参考文献です」の
「HTMLのテーブルをソートする16の方法」が
リンクきれてますね。
Posted by かひ at 2015年03月24日
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/98416175

この記事へのトラックバック

テーブルの列をソートできるようにする
Excerpt: テーブルをもっと便利に使いやすく2|TableKit 前回に引き続き、Web Designing4月号「Ajaxハジメマシタ」の“テーブルをもっと便利に使いやすく”からもう1つのスクリプトを紹介してみ..
Weblog: Good Sleep
Tracked: 2008-05-29 14:19

編集可能なテーブルの作成
Excerpt: TableKitを使う。 これは本当に便利だ。わざわざ、検索条件を保持して、ソートをさせてとか実装させずに非同期通信でクライアント側で処理することができる。 TableKitの本家 http://ww..
Weblog: totofund! (PukiWiki/TrackBack 0.4)
Tracked: 2008-10-02 21:55
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。