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. JavaScript

    JavaScriptのlocation.searchでクエリ情報を取得してみる

    JavaScriptで、現在のページのクエリ情報(URLの末尾にある「…

  2. jQuery-ResizableColumns

    JavaScript

    テーブルのカラムをリサイズできる「jQuery-ResizableColumns」

    jQuery-ResizableColumnsは、テーブルのカラムをリ…

  3. ResponsifyJS

    JavaScript

    画像で見せたいエリアを保持しながらレスポンシブにできる「ResponsifyJS」

    ResponsifyJSは画像のなかで見せたいエリアを保持させながらレ…

  4. jCider

    JavaScript

    レスポンシブ対応のjQueryカルーセルプラグイン実装「jCider」

    jCiderはレスポンシブ対応のシンプルなカルーセルを実装できるjQu…

  5. rpage

    JavaScript

    Bootstrapを使ったレスポンシブなページネーション「rpage」

    rpageはBootstrapを使ったレスポンシブに対応したページネー…

  6. Stripe.Com Navigation

    JavaScript

    コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

    ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウ…

最近の記事

  1. サーモンアボカドサラダラップとドリップ
  2. 猿田彦フレンチ
  3. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  4. ビジネスホテル
  5. ドリップコーヒー

アーカイブ

PAGE TOP