前の記事 ≪:IE共通の9つのCSSバグをそれぞれ解決する方法
次の記事 ≫:シンプルなベクター形式のオフィスで使えるアイコン集

Excelっぽい機能も付いた検索&ソート&ページング機能付きテーブル実装JSライブラリ「TinyTable V3」

2009年11月18日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
Excelっぽい機能も付いた検索&ソート&ページング機能付きテーブル実装JSライブラリ「TinyTable V3」。
次のような、UIも美しい高機能なテーブルの実装が出来ます。

普通のテーブルをリッチに



スタイルを切ると、次のような単なる<table>タグで定義されたデータなのですが、JavaScript とCSSの力によって大きく形を変えています。



機能紹介

検索機能。大量にデータがあった場合にこの機能はかなり重宝します。


ソート機能。データが一杯でも分かりやすい。全カラムにおいてソート機能が付いてます


ページング機能によって縦幅が大きく取られることを防ぎます。view all ボタンで全部を表示することも可能。


縦方向の合計をExcelのsumっぽく出すことも可能です。


実装方法
必要なライブラリを読み込んだら以下のように初期化してあげればOK.
var sorter = new TINY.table.sorter('sorter','table',{options});

options にオプションを渡すことで多岐にわたるカスタマイズが可能です。

ダウンロードは以下のエントリを参照してください。
Advanced JavaScript Table Sorter ? TinyTable V3 - Web Development Blog
デモページ
関連の記事検索:JavaScript, table, テーブル
スポンサード リンク

By.KJ : 2009年11月18日 10:02 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)