Excelっぽい機能も付いた検索&ソート&ページング機能付きテーブル実装JSライブラリ「TinyTable V3」
2009年11月18日-
スポンサード リンク
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
デモページ
次のような、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
デモページ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 好きな画像や文字を埋め込んだQRコードをリアルタイムで作れるWEBツール
- 過去のエントリ