ITエンジニア/デザイナ向けにオープンソースを毎日紹介

HTMLのテーブル表示は色々な場面で使われます。ですが単に表示するだけで満足するケースは少なく、テーブル内のデータをもっとインタラクティブに変更したいと言う要望は多々聞きます。

そこで使ってみたいのが今回紹介するjQuery Dynatableです。そもそもHTMLのテーブルを描画するのではなく、JSONデータを使って動的にレンダリングします。その結果、面白いデータ操作が色々と実現できています。

早速見ていきましょう。

デモです。表示件数、ページネーション、フィルタリングといった機能が実装されています。
デモです。表示件数、ページネーション、フィルタリングといった機能が実装されています。

表示件数を変えれば動的に内容が変更されます。
表示件数を変えれば動的に内容が変更されます。

フィルタリングもインタラクティブに行われます。
フィルタリングもインタラクティブに行われます。

JSONからだけでなく、動的にテーブルを生成できます。例えば以下のコードはリストから読み取ってテーブルを生成します。

<ul id="my-list">
  <li>
    <span class="name">Fender Custom Esquire GT</span>
    <span class="type">Guitar</span>
    $<span class="price">450.00</span>
  </li>
  <li>
    <span class="name">ESP LTD B4-E</span>
    <span class="type">Bass</span>
    $<span class="price">400.00</span>
  </li>
</ul>

$('#my-list').dynatable({
  table: {
    bodyRowSelector: 'li',
    rowReader: function(index, li, record) {
      var $li = $(li);
      record.name = $li.find('.name').text();
      record.type = $li.find('.type').text();
      record.price = parseFloat($li.find('.price').text());
    }
  }
});

ソート機能もあります。
ソート機能もあります。

年数によるドロップダウン。
年数によるドロップダウン。

金額の範囲指定もできます。
金額の範囲指定もできます。

テーブルだけでなくリストでも使えます。

こんな感じのリストにも使えます。
こんな感じのリストにも使えます。

さらにグラフとの組み合わせなんてのも。

動的に変更されるグラフです。
動的に変更されるグラフです。

jQuery Dynatableはテーブル表示を基本として、さらに発展してリストやグラフの動的変更、フィルタリング機能に使えたりもします。一覧系画面を作る際に便利に使えると思われます。

データを予め読み取らないといけないので大量のデータには向かないかもしれませんが、100件くらいのデータであれば十分使えるレベルの速度で使えるでしょう。

データの追加前後に発生するイベントもサポートされていたり、DOM操作のAPIも充実しています。システムと組み合わせたデータ表示に最適なライブラリと言えそうです。

jQuery DynatableはjQuery/JavaScript製、GNU Affero General Public Licenseのオープンソース・ソフトウェアです。

Dynatable.js - jQuery plugin for HTML5+JSON interactive tables and more

JangoSteve/jquery-dynatable

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2