日: 2023年9月8日

 

 

 

Tabulatorのテーブルのデータとして、今まで大容量、多いレコードのデータを読み込む必要がなかった為、Ajaxでリクエストして受信したデータを一旦ローカルの配列にして表示させてましたが、
この度、大量のデータでページ毎に読み込む必要があって試してみました。Tabulatorのドキュメントの通りにしてます。

詳しくはこちら

< コード例 >

Javascriptクライアント

// ++ Tabulator ++ //
    let table = new Tabulator('#table_files', {
      columns: COLUMNS,

      // ロード時既定ソート列 リクエストパラメータはsortでMapのList //
      initialSort: [
        {column: "NM_FILE", dir: "asc"}, //sort by this first
                //{column:"TM_UPDATE", dir:"desc"}//then sort by this second
      ],
      
      // ソートモードはサーバー側 //
      sortMode: "remote",

      ajaxURL: url, //ajax URL
      
      // AJaxのリクエストパラメータ //
      ajaxParams: {
        years: years, folders: folders, exts: exts, fnm: fnm, isin: isin,
        ischart: isChartShow ? "1" : "0"
      },
      ajaxConfig: "POST",
      index: "id",

      ajaxRequesting: function (url, params) {
        return true
      },
	  
      // == レスポンスの処理 == //
      // dataのキーを返す応答 + jqGridのuserDataの処理 //
      ajaxResponse: function (url, params, response) {
        //url - the URL of the request
        //params - the parameters passed with the request
        //response - the JSON object returned in the body of the response.

        console.log(response)

        // === ここにテーブル以外の処理を入れる === //

        return response
      },
      		
      // ==== 省略 ==== //
      		
})

PHPサーバー
データ配列のキーはTabulatorがデフォルトで使う “data”にします。
レスポンスにTabulatorがデフォルトで使う “last_page” を加えます

<?php

// == リクエストパラメータ == //

// Tabulatorが送るページインデックスとレコード数 //
// ページと行数 //
$page = $_POST["page"] ? $_POST["page"] : $_GET["page"];
$size = $_POST["size"] ? $_POST["size"] : $_GET["size"];

// Tabulatorが送るソート列と方向 //
// ソート //
$sorts = $_POST["sort"] ? $_POST["sort"] : $_GET["sort"];

$sort_column = $sorts[0]["field"];
$sort_order = $sorts[0]["dir"];


// レスポンス配列 //
 $resp = array(
      "data" => $response_array_limited,
      "sql" => $sql_files,             // 実行SQL
      "last_page" => $last_page,       // <== Tabulatorが使うデフォルトページ数
      "totalcount" => $totalcount,     // 合計レコード数
      "tmcost" => $entm - $sttm,
      "total_file_size" => $total_file_size,
      
      "sorts" => $sorts
  );

  echo json_encode($resp, JSON_UNESCAPED_UNICODE + JSON_UNESCAPED_SLASHES + JSON_NUMERIC_CHECK + JSON_UNESCAPED_LINE_TERMINATORS);

<?php

// SQL ソートとページング部分 //

ORDER BY
  ##SORT_COLUMN## ##SORT_ORDER##, NM_FOLDER ASC, NM_FILE ASC
LIMIT :STARTIDX, :PAGESIZE  

// ソートはSQL文を置換 //
$sql_files = str_replace("##SORT_COLUMN##", $sort_column, $sql_files);
$sql_files = str_replace("##SORT_ORDER##", $sort_order, $sql_files);

// ページングはパラメータを渡す //

// ページング用 //
$startidx = ($page - 1) * $size;
$endidx = $startidx + $size - 1;
$last_page = (int) ($totalcount / $size) + 1;

// 明細 パラメータセット 実行 //
$stmt = $dbh->prepare($sql_files);
$stmt->bindvalue(':STARTIDX', $param_startidx, PDO::PARAM_INT);
$stmt->bindvalue(':PAGESIZE', $param_size, PDO::PARAM_INT);
$stmt->execute();