このエントリーをはてなブックマークに追加

状態保存サンプル(ajax処理によるサーバ側への保存)

DataTablesのページ情報をサーバ側へ保存するにはstateSaveをtrueにし、「stateLoadCallback」「stateSaveCallback」を利用します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>状態保存のサンプル(サーバへ状態保存)</title>
<link rel="stylesheet" href="css/jquery.dataTables.css" type="text/css" />
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.dataTables.js"></script>
<style type="text/css">
body {
   background-color: #ffffe0
}
</style>
</head>
<body>
<h1>状態保存のサンプル</h1>
<table id="data-bind-json-sample">
   <thead>
      <tr>
         <th>カラム1</th>
         <th>カラム2</th>
         <th>カラム3</th>
      </tr>
   </thead>
</table>
</body>
<script type="text/javascript">
var jsonData = [];

for (var i = 0; i < 100; i++) {
   jsonData.push({ "col1":"value1-1", "col2":"value1-2", "col3":"value1-3"});

}

$(function() {
   $("#data-bind-json-sample").DataTable({
       data: jsonData
       , columns: [
              { data: 'col1' },
              { data: 'col2' },
              { data: 'col3' }
          ]
      , stateSave: true
      // stateLoadCallbackにてページの状態をサーバより取得し、設定を実施します。
       , stateLoadCallback: function (settings) {
           var pageState;

           $.ajax( {
               url: '/state_load',
               async: false,
               dataType: 'json',
               success: function (json) {
                  pageState = json;
               }
           } );

           return pageState;
       }
      ,
      // stateSaveCallbackにてページの状態を保存します。
      stateSaveCallback: function (settings, data) {
          $.ajax( {
            "url": "/state_save",
            "data": data,
            "dataType": "json",
            "type": "POST",
            "success": function () {}
          } );
        }
   });
})
</script>
</html>