ページネーションを検証 paginathing.js編

投稿日：2022年1月1日

先日の絞り込み検索の機能にページネーションの機能を追加する要望がありました。

jQueryでページネーションを実装してみたいと思います。

ググると数種類のページネーションjQueryライブラリがヒットします。
今回は、paginathing.js を検証してみます。

Github からpaginathing.min.jsをダウンロードしhtmlに読み込んで使用します。

ソースコードは以下。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ▼▼▼ style.css -->
  <link rel="stylesheet" href="css/style.css">

  <!-- ▼▼▼ normalize.css -->
  <link rel="stylesheet" href="css/normalize.css">

  <!-- ▼▼▼ jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

  <!-- ▼▼▼ paginathing.js読み込み -->
  <script src="js/paginathing.min.js"></script>

  <!-- ▼▼▼ Fontawesome -->
  <script src="https://kit.fontawesome.com/79d73fee52.js" crossorigin="anonymous"></script>
  <title>paginathing</title>
</head>

<body>
  <!-- ▼▼▼ ここにhtmlを出力する -->
  <section id="contents"></section>

  <!-- ▼▼▼ js読み込み -->
  <script src="js/index.js"></script>
</body>

</html>

▲20行目でpaginathing.min.jsを読み込んでいます。

<section id="contents"></section>

▲29行目、id値を取得しJavaScriptのmap()関数でhtmlを出力します。

index.js

// ▼▼▼ htmlに出力する項目を配列に追加
var nums = [{
    num: "01"
  },
  {
    num: "02"
  }, {
    num: "03"
  }, {
    num: "04"
  }, {
    num: "05"
  }, {
    num: "06"
  }, {
    num: "07"
  }, {
    num: "08"
  }, {
    num: "09"
  }, {
    num: "10"
  },
]

// ▼▼▼ paginathingのオプション
$(function () {
  $('#contents').paginathing({
    limitPagination: 2,
    pageNumbers: true,
    perPage: 5,
    firstText: '<i class="fas fa-angle-double-left"></i>',
    lastText: '<i class="fas fa-angle-double-right"></i>',
    prevText: '<i class="fas fa-angle-left"></i>',
    nextText: '<i class="fas fa-angle-right"></i>',
    activeClass: 'active',
  });
});

// ▼▼▼ map()関数でループ、htmlに出力
const setNums = () = & gt; {
  return nums.map((data) = & gt; {
    return '<div class="contentsWrap"><div><p class="num">' + data.num + '</p></div>'
  })
}

// ▼▼▼ htmlに出力
$('#contents').html(setNums());

▲29〜36行目のオプションが要になります。
Available Options を参照してください。
firstText、lastText、prevText、nextTextはFont Awesomeのキャラクターを出力する記述です。
activeClassでアクティブなCSS値を設定し、CSSで黒矩形の白文字にしてあります。
よく見かける...などの省略記号は実装できないみたいです。

style.css

.pagination {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination li {
  margin-right: 1em;
}

.pagination li a {
  text-decoration: none;
  color: #000;
}

.page {
  padding: .5em;
  border: 1px solid #000;
}

.active {
  background-color: #000;
}

.pagination .active a {
  color: #fff;
}

▲ページネーション関連のCSSです。
.paginationやpageという値が出力されるのでCSSで整えます。

▲以上、今回、作ったものです。

まとめ

他にもpagination.js というものもあります。
pagination.js では省略記号も実装できるので次回以降検証したいと思います。

最終的には、絞り込み検索とページネーションの併用も行いたいので、この辺も検証したいと思います。

最後まで読んでくださりありがとうございました。