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

関連記事

  1. no-image
  2. JavaScript

    JavaScriptの配列操作をメモがてら整理してまとめてみる

    自分用のメモです。JavaScriptの配列操作に関するメソッドなんか…

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

    JavaScript

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

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

  4. Hamburger Icon Menu
  5. jQuery Text Fade Delay
  6. no-image

    JavaScript

    高さを揃えたレスポンシブな画像ギャラリー「jQuery Mosaic plugin」

    jQuery Mosaic pluginは高さを揃えたレスポンシブな画…

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP