jQuery：「paginathing.js」を使えば静的なHTMLページへのページネーション実装が簡単にできる！

だま
だま

ありとあらゆる事情により新着情報一覧を静的に実装したけれどボリュームがどんどん増えてしまいページが長くなり......

とりあえずCSS+jQueryでページネーションを追加してみたけれど......

新着情報を更新する度に1ページあたりの記事量を手動で調整しなければならず......

えっ！？この作業は......新着情報の更新が途絶えるまで続くんですか！？ウワーッ！！

=================

...こんなつらい思いをしなくても、jQueryプラグイン「paginathing.js」を使えば自動的にページネーションを作成してくれます。

  • 実装はとっても簡単！
  • 1ページあたりの表示件数が指定できる！
  • 「次へ・前へ」「最初へ・最後へ」といったボタンの追加ももちろん可能！

と、三拍子揃ったとっても便利なプラグインです。

こんなつらい思いをしていたWeb制作者は自分だけで十分なので、ぜひ「paginathing.js」を導入して幸せになってください。

デモページ

使い方

まずはプラグインをダウンロード。

paginathing.js GitHubページ（外部リンク）

「paginathing-master.zip」を解凍し、「paginathing.min.js」をhtmlファイルへ読み込みます。

jquery本体の読み込みも忘れずに。

<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/paginathing.min.js"></script>

ページネーションを追加したい要素を、任意のclassを追加した枠で囲みます。

件数ごとに区切るのはプラグインがやってくれるので、ただただ羅列するだけでOKです。

<div class="news-container">
	<dl>
		<dt>2021.03.21</dt>
		<dd>今週の新商品を追加しました。</dd>
	</dl>
	<dl>
		<dt>2021.03.13</dt>
		<dd>フォトギャラリーを更新しました。</dd>
	</dl>
	<dl>
		<dt>2021.03.02</dt>
		<dd>今週の新商品を追加しました。</dd>
	</dl>
	<dl>
		<dt>2021.02.25</dt>
		<dd>お客様の声を更新しました。</dd>
	</dl>
	<!-- 省略 -->
	<dl>
		<dt>2021.01.19</dt>
		<dd>お客様の声を更新しました。</dd>
	</dl>
	<dl>
		<dt>2021.01.18</dt>
		<dd>ウインターセール開催のお知らせ</dd>
	</dl>
	<dl>
		<dt>2021.01.15</dt>
		<dd>イベント開催のお知らせ</dd>
	</dl>
	<dl>
		<dt>2021.01.12</dt>
		<dd>フォトギャラリーを更新しました。</dd>
	</dl>
	<dl>
		<dt>2021.01.10</dt>
		<dd>今週の新商品を追加しました。</dd>
	</dl>
	<dl>
		<dt>2021.01.01</dt>
		<dd>HPをリニューアルしました。</dd>
	</dl>
</div>

あとはjQueryを記述するだけ！

$(function() {
	$('.news-container').paginathing({//親要素のclassを記述
		perPage: 5,//1ページあたりの表示件数
		prevText:'前へ',//1つ前のページへ移動するボタンのテキスト
		nextText:'次へ',//1つ次のページへ移動するボタンのテキスト
		activeClass: 'navi-active',//現在のページ番号に任意のclassを付与できます
	})
});

終わり！やったー！簡単！！

あとはCSSでチョチョイと見た目を整えるだけです。とっても幸せですね。

上記で記載したものに加えて、他によく使いそうなオプションも下記に紹介します。

=================

firstLast

最初のページへ・最後のページへボタンを表示するかしないかを設定できます。デフォルトはtrue。

firstText

最初のページへ移動するボタンに任意のテキストを指定できます。(例：firstText:'最初へ')

lastText

最後のページへ移動するボタンに任意のテキストを指定できます。(例：lastText:'最後へ')

prevNext

前のページへ・次のページへボタンを表示するかしないかを設定できます。デフォルトはtrue。

=================

その他のオプションは公式のGitHubページ下部から確認可能です。

paginathing.js GitHubページ（外部リンク）

以上、静的なHTMLページへ簡単にページネーションが実装できる「paginathing.js」の紹介でした。

関連記事