月: 2023年9月

Tabulator initialSort とソート内容表示

投稿日: 投稿者:

 

 

 

< コード例 >


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

カラムの1行目にspanをセット


<span id="sorttxt" class="ml-2">ソート列:ソート順</span>

ソート後のイベント


  /**
     * ソート表示テキスト
     * @param {type} clms
     * @param {type} sorters
     * @returns {String}
     */
    const sortstsstr = (clms, sorters) => {
      
      let clmmap = {}
      clms.forEach(tmp => clmmap[tmp.field] = tmp.title)
      
      let res = ""
      sorters.forEach(st => 
        res += clmmap[st["field"]] + (st.dir === "asc" ? ":小さい順 " : "大きい順 ")
      )
      return res
      
    }
    
    // @@ ソートが完了した時 @@ //
    table.on("dataSorted", function (sorters, rows) {
      //sorters - array of the sorters currently applied
      //rows - array of row components in their new order
      
   
      // 初回ロード時も呼ばれる //
      $("#sorttxt").text(sortstsstr(COLUMNS[0]["columns"], sorters))
      
      
    });

< 画面例 >

Tabulator AJaxリクエストと表示

投稿日: 投稿者:

 

 

 

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();