skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

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

使用方法 非常に簡単に導入できます。
[ 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