Tabulator カスタムページネーターの配置

 

 

 

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

< コード例 >

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



    })

< 画面例 >

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

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