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
関連記事
人気記事
最新記事RSS
- JavaScriptでCaptchaぽいのを作る「jQuery Real Person」
- でっかいメニューをJavaScriptで作る「Cut & Paste jQuery Mega Menu」
- mootoolsで3Dメニュー「JavaScript 3D Cube Menu」
- これはすごい！テキストに影を付け印象的にする「CSS text-shadow Fun」
- MVPenでアナログの良さを考え直す。
- 第3回「マネタイズHACKS」に参加してみた。
- div要素の幅を伸縮自由にするJavaScript「Ingeny Splitter」
- jQueryでメニューをわかりやすくする「Side Navigation Tooltip / Popup Bubble」
- 入力を促す文字をフォームに表示するJavaScript「JQUERY.FIELDTAG.JS」
- iPhoneライクにスクロールさせるJavaScript「OverScroll」