Saoline Tips

テーブルが縦に長い場合、上の方にも配置したページネーターでページ移動出来ると便利なので配置してみました。

< コード例 >

HTML

<!-- ページネーション -->
<div id="top_pagenator" class="ml-4 mt-0 pt-0">
  <span id="topp_first" class="mr-3 curpo topps tippyspan" title="Move to first page"><i class="fa fa-angle-double-left"></i></span>
  <span id="topp_prev" class="mr-3 curpo topps tippyspan" title="Move to previous page"><i class="fa fa-angle-left"></i></span>
  <span id="topp_next" class="mr-3 curpo topps tippyspan" title="Move to next page"><i class="fa fa-angle-right"></i></span>
  <span id="topp_last" class="mr-3 curpo topps tippyspan" title="Move to last page"><i class="fa fa-angle-double-right"></i></span>
  <!-- 9/99 -->
  <span id="topp_position" clss="text-white"></span>
</div>

Javascript
paginationCounterの関数

    paginationCounter: function (pageSize, currentRow, currentPage, totalRows, totalPages) {

      $("#topp_position").text(`${currentPage}/${totalPages}`)
      return "Showing " + pageSize + " rows of " + totalRows + " total";
    },

アイコンクリックのリスナー

  $(".topps").off("click")

  // @@ トップページネーションアイコンをクリックした時 @@ //
  $(".topps").on("click", function (e) {

    let firstButton
    let prevButton
    let nextButton
    let lastButton

    // ページネーションボタンをセット //
    $.each($("button"), function (j, btn) {

      // tabulator-pageクラス内でテキストが合致する場合、セットする //
      if ($(this).hasClass("tabulator-page")) {
        const btntxt = $(this).text()
        if (btntxt === "First") {
          firstButton = $(this)
        }
        else if (btntxt === "Prev") {
          prevButton = $(this)
        }
        else if (btntxt === "Next") {
          nextButton = $(this)
        }
        else if (btntxt === "Last") {
          lastButton = $(this)
        }
      }

    })

    const tp = $(this).attr("id").split("_")[1]

    // ボタンクリックを発生させる //
    switch (tp) {
      case "first":
        $(firstButton).trigger("click")
        //pgPos = 1
        break
      case "prev":
        $(prevButton).trigger("click")
        //pgPos--
        break
      case "next":
        $(nextButton).trigger("click")
        //pgPos++
        break
      case "last":
        $(lastButton).trigger("click")
        //pgPos = pageSize
        break
    }


  })

2023-08-02版リスナーのコード
上コードで英語設定では動きますが、日本語では無理なので、調べたところ Tabulatorにページ移動のメソッドがあり、それ使えばすっきりと出来ました。

Tabulator Pagenation

 // @@ トップページネーションアイコンをクリックした時 @@ //
    $(".topps").on("click", function (e) {

      //alert(table.getPage())
      //return

      const id = $(this).attr("id")

      const currPage = table.getPage()
      const maxPage = table.getPageMax()

      if (id === "topp_first") {
        table.setPage(1)
      }
      else if (id === "topp_prev") {
        table.previousPage()
      }
      else if (id === "topp_next") {
        table.nextPage()
      }
      else if (id === "topp_last") {
        table.setPage(maxPage)
      }



    })

< 画面例 >

【全部揃ってます!!】日本のエアライン4 [全8種セット(フルコンプ)]【 ネコポス不可 】 価格：5984円（税込、送料別) (2023/2/17時点) 楽天で購入

航空ファン 2023年2月号【雑誌】【1000円以上送料無料】 価格：1361円（税込、送料無料) (2023/2/17時点) 楽天で購入

マウスが乗ったセルを反転させて強調表示させるため、組込みの関数を探してみましたが、ないようなので、StackOverFlowの投稿を参考にして、cellのformatterでエレメントにCSSのクラスを追加したり削除したりさせてみました。

< コード例 >
CSS

  /* tabulator セル文字反転用 */
  .text_reverse {
    color: white;
    background-color: black;
    
  }

Javascript

    // Airport name //
    {title: 'Name', field: 'nmAirport', width: 180,
      formatter: function (cell, formatterParams, onRendered) {

        // 反転させて強調 //
        const cellelm = cell.getElement()
        $(cellelm).on("mouseover", function (e) {
          $(this).addClass("text_reverse")

        })
        $(cellelm).on("mouseout", function (e) {
          $(this).removeClass("text_reverse")
        })
        return cell.getData().nmAirport

      }

    },

< 画面例 >

画像には枠をつけてみました。

  /* tabulator 画像セル背景反転用 */
  .imgback_reverse {
    background-color: #B8E2E6;
    border: 1px solid #00a0a0;
  }

入門JavaScript フロントエンドエンジニアになるための基本と実践スキル【電子書籍】[ 玉川純 ] 価格：2728円 (2023/2/20時点) 楽天で購入

JavaScript：the　good　parts 「良いパーツ」によるベストプラクティス [ ダグラス・クロフォード ] 価格：1980円（税込、送料無料) (2023/2/20時点) 楽天で購入