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