JSONデータの連携

JavaScript DataTables

【前提条件】

[環境]
  • jQuery 1.9.0
  • DataTables 1.9.4
参考サイト

DataTables 公式ページ
DataTables | Table plug-in for jQuery

【概要】

前回のエントリではDOMと配列データをもとにテーブルを作成しました。

今回はAjax通信でJSONを受け取り、受け取った結果を表示します。

【HTMLソース】

まずはHTMLソースからです。

HTMLやることは

タグの作成です。 

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="/js/libs/jquery-1.9.0/jquery.min.js"></script>
        <script type="text/javascript" src="/js/libs/datatables-1.9.4/jquery.dataTables.min.js" ></script>
        <script type="text/javascript" src="sampleApps.js"></script>
        <style>
            table {
                border: 1px;
                white-space: nowrap;
                width: 50%;
            }
            table th {
                text-align: center;
            }
            table#value_table th {
                background-color: lightgreen;
            }
        </style>
    </head>
    <body>
        <table id="value_table"></table>
    </body>
</html>

今回はテーブルタブだけのものを用意します。

【JSONデータ】

今回のサンプルで使用するJSONのデータは↓を使います。

{
    "valueList" : [
        { "no" : 5, "name" : "りんご" },
        { "no" : 3, "name" : "みかん" },
        { "no" : 1, "name" : "なし" },
        { "no" : 2, "name" : "いちご" },
        { "no" : 4, "name" : "バナナ" }
    ]
}

valueListと言うプロパティを持ったJSONです。

valueListの値は前回の配列データに
プロパティ名を追加したものです。

【JavaScriptソース】

$(function() {
    $('#value_table').dataTable({
        sAjaxSource : "/js/sample/jsonData.json",
        sAjaxDataProp : "valueList",
        aoColumns : [
            { sTitle : "No.", mData : "no"},
            { sTitle : "名称", mData : "name"}
        ]
    });
} );

sAjaxSourceにはJSONの取得元となるURLを指定します。

sAjaxDataPropには取得したJSONで読み込み対象となるプロパティを指定します。
ネストしている場合はドット区切りで指定します。

カラムの指定はaoColumnsで行います。
mDataに対象のカラムに表示するJSONデータを指定します。

【実行結果】

HTMLページを表示すると↓と同じような結果が表示されます。
（画像は前回の使いまわし）


【まとめ】

前回のDOM、配列に続き、
簡単な設定でJSONのデータをテーブルとして表示することができました。

新しく作成する画面などはDOM、配列ではなく
今回のようなJSONでやり取りすることが多くなると思います。