日: 2023年9月11日

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

< 画面例 >