前回からの続き。。
DataTables によるHTMLテーブルは当然かんたんに Ajax 対応できる。
arrayでのレスポンス
簡単な例として、サーバへのAjax呼び出しの結果としてarrayを返却する場合。
HTML のテーブルは前回と同様。
<body> <table id="table_id"> <thead> <tr><th>Rendering engine</th><th>Browser</th><th>Platform(s)</th></tr> </thead> </table> </body> </html>
dataTable のパラメータとして、sAjaxSource を指定してサーバのパスを指定する。
<script> $(document).ready(function(){ $('#table_id').dataTable( { "bProcessing": true, "sAjaxSource": "/home/list.txt" }); });
bProcessing を指定することで、Ajax 呼び出し中に処理中の表示をしてくれる。
list.txt の内容は以下の感じ。
{
"aaData": [
[ "Trident", "Internet Explorer 4.0", "Win 95+" ],
[ "Trident", "Internet Explorer 5.0", "Win 95+" ],
[ "Trident", "Internet Explorer 5.5", "Win 95+" ],
[ "Trident", "Internet Explorer 6", "Win 98+" ],
[ "Trident", "Internet Explorer 7", "Win XP SP2+" ],
[ "Trident", "AOL browser (AOL desktop)", "Win XP" ],
[ "Gecko", "Firefox 1.0", "Win 98+ / OSX.2+" ],
[ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+" ],
[ "Gecko", "Firefox 2.0", "Win 98+ / OSX.2+" ],
[ "Gecko", "Firefox 3.0", "Win 2k+ / OSX.3+" ],
[ "Gecko", "Camino 1.0", "OSX.2+" ],
[ "Gecko", "Camino 1.5", "OSX.3+" ],
[ "Other browsers", "All others", "-" ]
]
}
Ajax で取得した list.txt の内容が表示される。
Object の例
サーバからのレスポンスを Object とする場合には、以下のようにプロパティ名を指定する。
$(document).ready(function(){
$('#table_id').dataTable( {
"bProcessing": true,
"sAjaxSource": "/home/list.txt",
"aoColumns": [
{ "mData": "engine" },
{ "mData": "browser" },
{ "mData": "platform" }
]
});
});
</script>
返却値は Object 。
{
"aaData": [
{ "engine": "Trident", "browser": "Internet Explorer 4.0", "platform": "Win 95+" },
{ "engine": "Trident", "browser": "Internet Explorer 5.0", "platform": "Win 95+" },
{ "engine": "Trident", "browser": "Internet Explorer 5.5", "platform": "Win 95+" },
{ "engine": "Trident", "browser": "Internet Explorer 6", "platform": "Win 98+" },
{ "engine": "Trident", "browser": "Internet Explorer 7", "platform": "Win XP SP2+" },
{ "engine": "Trident", "browser": "AOL browser (AOL desktop)", "platform": "Win XP" },
{ "engine": "Gecko", "browser": "Firefox 1.0", "platform": "Win 98+ / OSX.2+" },
{ "engine": "Gecko", "browser": "Firefox 1.5", "platform": "Win 98+ / OSX.2+" },
{ "engine": "Gecko", "browser": "Firefox 2.0", "platform": "Win 98+ / OSX.2+" },
{ "engine": "Gecko", "browser": "Firefox 3.0", "platform": "Win 2k+ / OSX.3+" },
{ "engine": "Gecko", "browser": "Camino 1.0", "platform": "OSX.2+" },
{ "engine": "Gecko", "browser": "Camino 1.5", "platform": "OSX.3+" },
{ "engine": "Other browsers", "browser": "All others", "platform": "-" }
]
}
これだけだと意味がないわけで、
サーバから動的に結果を返却するには、クライアントからパラメータを送る必要があり、bServerSide を true として指定する。
<script> $(document).ready(function(){ $('#table_id').dataTable( { "bProcessing": true, "bServerSide": true, "sAjaxSource": "/home/list.htm" }); }); </script>
これにより、クライアントから以下のようなリクエストが発行される。
http://localhost:9090/home/list.htm?sEcho=1&iColumns=3&sColumns=&iDisplayStart=0&iDisplayLength=10&mDataProp_0=0&mDataProp_1=1&mDataProp_2=2&sSearch=&bRegex=false&sSearch_0=&bRegex_0=false&bSearchable_0=true&sSearch_1=&bRegex_1=false&bSearchable_1=true&sSearch_2=&bRegex_2=false&bSearchable_2=true&iSortCol_0=0&sSortDir_0=asc&iSortingCols=1&bSortable_0=true&bSortable_1=true&bSortable_2=true&_=1351519775180
パラメータの意味は、
リクエストパラメータ
| 型 | 名前 | 説明 |
|---|---|---|
| int | iDisplayStart | 現在のデータセットの表示開始位置 |
| int | iDisplayLength | テーブルに表示できるレコード数 |
| int | iColumns | 表示カラム数() |
| string | sSearch | 検索フィールドの値 |
| bool | bRegex | trueのばあい正規表現によるフィルタが有効 |
| bool | bSearchable_(int) | クライアント側で各列の検索が有効となっているか |
| string | sSearch_(int) | 各列のフィルター文字 |
| bool | bRegex_(int) | trueのばあい各列の正規表現によるフィルターが有効 |
| bool | bSortable_(int) | クライアント側で各列のソートが有効になっているか |
| int | iSortingCols | ソートに使用する列の数 |
| int | iSortCol_(int) | ソートの条件として使用されている列 |
| string | sSortDir_(int) | 各列のソート条件"desc" または "asc" |
| string | mDataProp_(int) | 各列の mDataProp プロパティの値 |
| string | sEcho | テーブルのレンダリング時にDataTabelsが利用する情報 |
サーバからのレスポンス
| 型 | 名前 | 説明 |
|---|---|---|
| int | iTotalRecords | フィルタリングされる前の合計レコード数 |
| int | iTotalDisplayRecords | フィルタリング後の合計レコード数 |
| string | sEcho | クライアントからのリクエストのsEchoの値 |
| string | sColumns | コンマで区切った列の名前(オプション) |
| array | aaData | 2次元のarrayデータ |
例えば25レコードあってフィルタリングしていない場合は以下のレスポンスをサーバから返すことになる。
{ "iTotalRecords": 25, "iTotalDisplayRecords": 25, "sEcho": 1, "aaData": [ [ "Trident", "Internet Explorer 4.0", "Win 95+" ], [ "Trident", "Internet Explorer 5.0", "Win 95+" ], [ "Trident", "Internet Explorer 5.5", "Win 95+" ], [ "Trident", "Internet Explorer 6", "Win 98+" ], [ "Trident", "Internet Explorer 7", "Win XP SP2+" ], [ "Trident", "AOL browser (AOL desktop)", "Win XP" ], [ "Gecko", "Firefox 1.0", "Win 98+ / OSX.2+" ], [ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+" ], [ "Gecko", "Firefox 2.0", "Win 98+ / OSX.2+" ], [ "Gecko", "Firefox 3.0", "Win 2k+ / OSX.3+" ] ] }
レコードの総件数は25件だけど、Search の条件に合致するレコードが 15件とかだったら iTotalDisplayRecords の値を15とする。
