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

関連記事

• [jQuery]tablesorter
• [jQuery]quickSearch
• [jQuery]Simple tableSorter
• [mootools]mooTblSort
• [prototype]TableKit

• ECサイトに関するサイト24
• Movable Type 4.xで「承認待ち」をメールで通知するプラグイン「EasyWorkflow」
• jQueryでファンシーなLightBoxクローンを作る「Fancy Zoom」
• mootoolsで、いい感じに横スクロールするJavaScript「mooHorizonSlider」
• 1.3 KBの軽量アコーディオンJavaScript「JavaScript Accordion」
• 角丸をJavaScriptライブラリjQueryで作る「jQuery Corners」
• タイムテーブルを作るJavaScript「today's timetable」
• JavaScriptライブラリprototypeで華麗に画像を表示する「showcase」
• モバイルサイトに関するサイト19
• JavaScriptライブラリ「mootools」で3Dぐるぐるさせる