Dynamic Table

JavaScript

スプレッドシートのようなテーブルを実装できるjQueryプラグイン「Dynamic Table」

Dynamic Tableはスプレッドシートのような高機能なテーブルを実装できるjQueryプラグインです。一般的なスプレッドシートのアプリケーションみたいに、ソートやフィルタリング、編集といったことが可能です。データはAJAXから読み込むことができます。

Dynamic Table

デモ

デモではスプレッドシートのようなテーブルにさまざまなデータが表示されています。各列の上部にはFruit、color、Country、Note、Supplier、Entry Dateといった項目があり、ここから任意の項目を基準にした昇順・降順での並び替えが可能です。

自分が確認しやすいように並び替えできるので、データがたくさんあるほど効率的にデータを閲覧できますね。

ちなみにソートする時は列の上部にある項目にマウスオーバーすると上下の矢印アイコンが表示されるので、ここから昇順や降順に並び替えできます。

また、その横にはフィルターのアイコンも表示されていて、ここをクリックするとテキストボックスが表示されます。ここに、任意のテキストを入力するとそれに合うデータを抽出することが可能です。

データの読み込みはAJAXから行うことができるので、たくさんの情報を効率的にテーブルに表示させたい場合にはとても役立つjQueryプラグインといえるのではないでしょうか?

オプションも豊富に用意されているので、カスタマイズ性にも期待できますね。

というわけで、ソートやフィルタリングなどができる高機能なテーブルを実装したい人は、ぜひ「Dynamic Table」を活用されてみてはいかがですか?

Dynamic Table

Basic Metro Dynamic jQuery Tab Menuお洒落でスタイリッシュなタブメニュー「Basic Metro Dynamic jQuery Tab Menu」前のページ

多彩なチャートを描画できる「TOAST UI Chart」次のページTOAST UI Chart

関連記事

  1. no-image

    JavaScript

    シンプルでカスタマイズもしやすいタブパネル実装「jquery-tab」

    jquery-tabはシンプルなタブパネルを実装することができるjQu…

  2. ScrollBooster

    JavaScript

    ドラッグしながらスクロールするライブラリ「ScrollBooster」

    ScrollBoosterはドラッグしながらスクロールする機能を実装で…

  3. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量ライブラリ「Lazyestload.js」

    Lazyestload.jsは画像の遅延読み込み機能を実装できる軽量の…

  4. RELLAX

    JavaScript

    超軽量で滑らかなパララックスを実装できるライブラリ「RELLAX」

    RELLAXは、滑らかなパララックスを実装できるバニラJavaScri…

  5. Slideout.js

    JavaScript

    軽量でタッチスライド対応のサイドメニュー・Slideout.js

    Slideout.jsは軽量でスマフォでのタッチスライドに対応したサイ…

  6. Palette-js

    JavaScript

    美しいカラーパレッドを追加できる「Palette-js」

    Palette-jsは美しいカラーパレッドを手軽にプロジェクトに追加す…

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP