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

    JavaScript

    使いやすいコンテキストメニューを実装できる「basicContext」

    basicContextはシンプルで使いやすいコンテキストメニューを実…

  2. jQuery contextMenu plugin & polyfill
  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでsetTimeoutを使えば各要素のアニメーションを実行させる時間を調整できる

    jQueryのsetTimeoutを使えば何秒後に実行するかといったこ…

  4. JavaScript

    クールでお洒落なナビゲーションを簡単に実装できるjQueryプラグイン「Kwicks for jQu…

    クールでお洒落なナビゲーションを簡単に実装することができるjQuery…

  5. Fluidbox

    JavaScript

    シンプルで軽快な動作が素敵なLightbox風のjQueryプラグイン「Fluidbox」

    FluidboxというjQueryプラグインを使えば、シンプルで軽快な…

  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる

    すごくどうでもいい内容なんですが、ちょっとやってみたかったので素人なが…

最近の記事

  1. クリニカのY字タイプのフロス
  2. 日和山公園の桜
  3. 成城石井 フレンチロースト
  4. COMOLI カシミアシルクニットパーカ
  5. 橋

アーカイブ

PAGE TOP