3ステップで表をソート&値を検索できるjavascript「dataTables」

twitterにつぶやく このエントリーを含むはてなブックマーク はてなブックマークを見るこの記事をクリップ! コメントを見るYahoo!ブックマークに登録 このエントリーをdel.icio.usに追加する deliciousブックマーク数このページを行き先登録 このページをniftyクリップに登録このページをBuzzurlに登録

サイト制作でよく使用するものの一つにテーブルで作成する表だと思います。
しかし、その整理方法は面倒で、縦に長くなると見づらくなります。
今回紹介するDataTablesはjQueryを使い簡単に表をソートさせたり、値を検索したり、表示する項目数を調整できます。
3ステップで表をソート&値を検索できるjavascript「dataTables」サンプル

使用方法 非常に簡単に導入できます。
[ STEP1 ]
DataTablesからjquery.dataTables.jsをjQueryからjquery.jsをダウンロードします。
[ STEP2 ]<
以下のようにhead内に記述します。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.dataTables.js" type="text/javascript"></script>
$(document).ready(function() {
$('#id名').dataTable();
} );
</script>

[ STEP3 ]
上記で指定したid名をtableに付与します。
3ステップで表をソート&値を検索できるjavascript「dataTables」サンプル

記事作成:2008年08月22日

前の記事:Movable Type 4.2にバージョンアップ
次の記事:BOMBERMAN JAVASCRIPT GAME by mootools.js

関連記事

人気記事

最新記事RSS

▲To the TOP