テーブルのオプション

【前提条件】

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

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

【概要】

テーブルのOptionで個人的に覚えたほうが良いなと思った
プロパティについてつらつらと書きます。

そのプロパティはiDisplayLengthとsDomです。

【iDisplayLengthプロパティ】

iDisplayLengthプロパティはテーブル内に表示するレコードの件数です。

デフォルトでは10が設定されているので、
10件を超えるデータの場合は2ページ目以降の表示となります。

デフォルトの設定ではページング機能が有効になっていますが、
次に説明するsDomの設定によっては
次ページ/前ページを表示させないこともできます。

1ページに全て表示させたい場合は-1を設定します。

【sDom】

sDomはテーブル付近のDOMの構成を設定します。
基本的な書き方としては<>で一つのDIV要素、
特定のアルファベットで特殊な要素の構成(後述します)となります。

入力例です。

    sDom : "<i>t<l>"

DIV要素についてはネスとさせることができます。
また、シングルクォーテーション/ダブルクォーテーションでくくることにより
クラス名の指定、IDの指定(#つき)ができます。

    sDom : "<'parent_div'<'#child_div'>>t<l>"

アルファベットの指定についてですが、
検索エリア、ページング部品などがあります。

^設定値 ^概要
l 1ページに表示件数のプルダウンリスト
f 検索用テキストフィールド
t テーブル本体
i レコード件数などの情報
p ページング部品

(rもあるのですが用途がわからなかったです・・・)

【おためし】

iDisplayLengthとsDomを使って、テーブルを表示させて見ます。

[HTMLソース]

CSSの設定を少ししているだけで、特に何もしていません。

<!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="/js/sampleApps.js"></script>
        <style>
            table {
                border: 1px;
                white-space: nowrap;
                width: 50%;
            }
            table th {
                text-align: center;
            }
            table#value_table th {
                background-color: lightgreen;
            }
            div.header_area {
                width: 50%;
                text-align: right;
            }
            div.header_area {
                width: 50%;
                text-align: right;
            }
            div#header_left {
                float :left;
            }
        </style>
    </head>
    <body>
        <table id="value_table"></table>
    </body>
</html>
[JSONデータ]

JSONデータは11件分を用意します。

{
    "valueList" : [
        { "no" : 1, "name" : "なし" },
        { "no" : 2, "name" : "いちご" },
        { "no" : 3, "name" : "みかん" },
        { "no" : 4, "name" : "バナナ" },
        { "no" : 5, "name" : "りんご" },
        { "no" : 6, "name" : "もも" },
        { "no" : 7, "name" : "ぶどう" },
        { "no" : 8, "name" : "メロン" },
        { "no" : 9, "name" : "すいか" },
        { "no" : 10, "name" : "さくらんぼ" },
        { "no" : 11, "name" : "グレープフルーツ" }
    ]
}
[JavaScript]
$(function() {
    $('#value_table').dataTable({
        sAjaxSource : "/js/jsonData.json",
        sAjaxDataProp : "valueList",
        iDisplayLength : -1,
        sDom : "<'header_area'<'#header_left'l>f>t<'footer_area'i>",
        aoColumns : [
            { sTitle : "No.", mData : "no"},
            { sTitle : "名称", mData : "name"}
        ]
    });
} );

iDisplayLengthには-1を指定しました。

sDomはヘッダーエリアとフッターエリアに分けていて、
ヘッダーエリアには一つ子要素のDIVが存在します。
実際に生成されたDOMは↓のようになります。

<div id="value_table_wrapper" class="dataTables_wrapper" role="grid">
  <div class="header_area">
    <div id="header_left">
      <div id="value_table_length" class="dataTables_length">
        <label>Show 
          <select size="1" name="value_table_length" aria-controls="value_table">
            <option value="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="100">100</option>
          </select>entries
        </label>
      </div>
    </div>
    <div class="dataTables_filter" id="value_table_filter">
      <label>Search: 
        <input type="text" aria-controls="value_table">
      </label>
    </div>
  </div>
  <table id="value_table" class="dataTable" aria-describedby="value_table_info">
    <!-- テーブル本体 -->
  </table>
  <div class="footer_area">
    <div class="dataTables_info" id="value_table_info">Showing 1 to 11 of 11 entries</div>
  </div>
</div>
[画面表示]

ブラウザで表示すると↓のようになります。

【まとめ】

今までのサンプルではsDomを指定せず使っていたため、
表示件数プルダウンなどがデフォルトで表示されていました。

便利な機能ではありますが不要な時は
sDomを使って表示させる項目の制御ができます。
sDomを使えば普通の表としても表現することができます。

その際、ページング機能をオフにした場合、
iDisplayLengthの指定を忘れると10件までしか
表示されないので注意が必要です。