HTML テーブルをナイスに扱う DataTables 〜Ajax編〜


前回からの続き。。
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とする。