ページネーションとは

情報がたくさんあり、そのまま表示してしまうと読みづらいため、
ページを分割して情報を読みやすくするコンポーネントのことを指します。



Googleの検索結果ページの一番下などにも設置されており、
日常的に使用されているのはないでしょうか。
今回はES2015(ES6)を使用して、このコンポーネントを作成してみたいと思います。

成果物

CodeSandboxを使用して実装致しました。

解説

必要なHTMLを記述

<div class="container">
    <div>
        <span id="js-pagination-result-total"></span>件中
        <span id="js-pagination-result-range-text"></span>
    </div>
    <div>
        <button id="js-button-prev">
            前へ
        </button>
        <button id="js-button-next">
            次へ
        </button>
    </div>
    <div>
        <nav id="js-pagination-result-range"></nav>
        現在のページ: <span id="js-pagination-current"></span>
    </div>
</div>

必要なJavaScriptを記述する

jQueryは使用せず、ES2015(ES6)で書きました。
IE11などレガシーブラウザではそのままでは動作しません。
Babelなどを用いてトランスパイルしてください。

// 前へ_DOM指定
const prevButton = document.getElementById("js-button-prev");
// 次へ_DOM指定
const nextButton = document.getElementById("js-button-next");

// 総数
const globalTotalItem = 100;
// 1ページに表示したい件数
const PER_PAGE = 10;
// 初期ページ
var initialPage = 0;
// 現在のページ
var currentPage = 0;

// 配列を任意の数だけ作成
const range = (start, end) => {
  const array = [...Array(end - start + 1)].map((_, i) => {
    return start + i;
  });
  return array;
};

// 閲覧中の情報の件数の範囲を表示
const rangeCurrentPage = () => {
  if (!globalTotalItem) return;
  const start = currentPage * PER_PAGE + 1;
  const text =
    (currentPage + 1) * PER_PAGE < globalTotalItem
      ? `${start}件〜${(currentPage + 1) * PER_PAGE}件目を表示`
      : `${start}件〜${globalTotalItem}件目を表示`;
  return text;
};

// 前へボタン_アクション
prevButton.addEventListener("click", () => {
  if (initialPage >= currentPage) return;
  currentPage = currentPage - 1;
  render();
});
// 次へボタン_アクション
nextButton.addEventListener("click", () => {
  if (PER_PAGE * (currentPage + 1) >= globalTotalItem) return;
  currentPage = currentPage + 1;
  render();
});

// レンダリング
const render = () => {
  document.getElementById(
    "js-pagination-result-total"
  ).innerHTML = globalTotalItem;
  document.getElementById("js-pagination-result-range").innerHTML = range(
    1,
    Math.ceil(globalTotalItem / PER_PAGE)
  );
  document.getElementById(
    "js-pagination-result-range-text"
  ).innerHTML = rangeCurrentPage();
  document.getElementById("js-pagination-current").innerHTML = currentPage + 1;
};

render();

ここまでに紹介したHTMLとJSをコピペいただければ
問題なく動作するはずです。
ページ番号にリンクは指定されていないため、必要であれば自身で追加をお願いします。

最後に

もともと「○○件中 ○○件 ~ ○○件を表示」のテキストを出力するためスクリプトでしたが、
それだけではテストしづらいため、ページ番号を操作できるパーツをいくつか追加致しました。