DataTables入門

JavaScript DataTables

【前提条件】

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

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

【概要】

簡単にテーブルのソート・検索などが行える
DataTablesの基本についてまとめました。

DataTablesはjQueryのプラグインで
配列データからのテーブル作成や
DOMに対して後付でのソートなどを行えます。

配列データと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="/jquery-1.9.0/jquery.min.js"></script>
        <script type="text/javascript" src="/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#dom_type_table th {
                background-color: lightblue;
            }
            table#array_type_table1 th {
                background-color: lightgreen;
            }
            table#array_type_table2 th {
                background-color: lightcoral;
            }
        </style>
    </head>
    <body>
        <p>配列埋め込み（aoColumn）</p>
        <table id="array_type_table1"></table>
        <p>配列埋め込み（aoColumnDef）</p>
        <table id="array_type_table2"></table>
        <p>DOM埋め込み</p>
        <table id="dom_type_table">
            <thead>
                <tr>
                    <th>No.</th>
                    <th>名称</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>5</td>
                    <td>りんご</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>みかん</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>いちご</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>なし</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>バナナ</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

今回のサンプルでは配列用のテーブル2つと
DOM用のテーブルの計3つを対象としています。

作成するJavascriptのソースのファイル名は
「sampleApps.js」です。

【Javascriptソース】

続いてJavascriptソースです。

$(function() {
    $("#dom_type_table").dataTable();

    var fruitData  = [
        [ 5, "りんご" ],
        [ 3, "みかん" ],
        [ 1, "なし" ],
        [ 2, "いちご" ],
        [ 4, "バナナ" ]
    ];

    $("#array_type_table1").dataTable({
        aaData : fruitData,
        aoColumns : [
            { sTitle : "No."},
            { sTitle : "名称"}
        ]
    });

    $("#array_type_table2").dataTable({
        aaData : fruitData,
        aoColumnDefs : [
            { sTitle : "No.", aTargets : [0]},
            { sTitle : "名称", aTargets : [1]}
        ]
    });
} );

dataTable関数を実行することによりテーブルの設定を行います。
さまざまなオプションを指定することができますが、
今回は最小限の設定のみにしています。

既存のDOMに対して設定を行う場合は、dataTable関数を呼び出すだけです。

配列データに対して設定を行う場合は、
aaData、aoColumns/aoColumnDefsの設定が必要になります。

aaDataには対象のデータの配列オブジェクトを指定します。

aoColumns/aoColumnDefsには設定用のJSONオブジェクトを指定します。
sTitleにはカラムのタイトルを設定します。

[aoColumns]

aoColumnsの場合は指定した配列の同じインデックスの箇所に設定が適用されます。

そのため、aoColumnsの配列の長さと
aaDataの配列の長さは一致している必要があります。

[aoColumnDefs]

aoColumnDefsの場合はaoColumnsと違い、
配列の長さが一致している必要はありませんが、
各設定値の中で対象となるデータのインデックスを指定する必要があります。

インデックスの指定はaTargesに指定します。

【表示結果】

作成したHTMLを表示して見ると↓のようになります。

カラムのタイトルをクリックすると
カラム内の値でソートが切り替わります。

元のHTMLでは作成していなかった項目が追加されています。
1ページ内の表示切替、検索ボックス、表示範囲の説明、前ページ/次ページです。
これらはDataTablesのデフォルト設定では表示されるようになっています。

【まとめ】

DataTablesを使うと簡単にソート機能などが使えるようになりました。

既存のDOMに対して簡単に設定ができるのは
かなり重宝すると個人的には思います。