テーブルのオプション
【前提条件】
[環境]
- 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件までしか
表示されないので注意が必要です。