ワイズリマインダー

JavaScriptでページネーションを表示する

2025.10.10

こちらからダウンロードおよびサンプルを体験できます。

 

 

一覧表示を作るたびに、毎回同じことをしていました。

・表示件数を分割する
・ページ番号を作る
・クリックで再描画する

仕組み自体は難しくありませんが、プロジェクトが変わるたびに同じコードを書くのが地味に面倒です。
そこで、依存ライブラリなしで使えるページネーション用のJavaScriptライブラリを作成しました。

jQueryやフレームワークは不要です。
ダウンロードして配置するだけで利用できます。

 

このライブラリの目的

最近はReactやVue前提のライブラリが多く、「ちょっと一覧を分割したいだけ」でも導入コストが高くなりがちです。
このライブラリは次のような用途を想定しています。
静的サイト、管理画面、社内ツール、あるいは軽量なWebアプリ。
できるだけシンプルに、必要な機能だけを提供する ことを目標にしています。

 

特徴

特別な環境は必要ありません。
JavaScriptファイルをダウンロードし、プロジェクトに配置するだけで動作します。
外部依存はなく、純粋なJavaScriptのみで実装しています。
そのため既存環境を壊さず、どんなページにも組み込みやすい設計になっています。

 

導入方法

まず、ライブラリ本体をダウンロードしてください。
（※ダウンロード方法やファイル構成はリンク先の記事に記載しています）
ファイルをプロジェクト内に配置したら、HTMLから読み込みます。

<script src="pagination.js"></script>

これで準備は完了です。
ビルドツールやnpmは不要です。

 

基本的な使い方

実際の使用コードはリンク先にまとめていますが、基本的な流れだけ説明します。
1.表示対象のデータを用意する
2.表示件数を指定する
3.描画先の要素を渡す
あとはライブラリ側がページ番号生成やページ切り替えを処理します。
ページネーション特有の状態管理やイベント処理を書く必要はありません。

 

想定している利用シーン

このライブラリは、大規模SPAというよりも、次のような場面で役立ちます。
管理画面の一覧表示、簡易検索結果ページ、静的サイトのコンテンツ分割などです。
ページネーションを実装したいけれど、フレームワークを導入するほどではない場合にちょうど良いと思います。

 

詳細な使用方法

オプション設定や実装例については、以下にまとめています。

こちらからダウンロードおよびサンプルを体験できます。
利用する場合は、上記URLから最新バージョンをダウンロードして、任意のディレクトリにアップロードしてください。

実際に動作するコードを掲載しているので、そのまま試せます。

 

最後に

もし使ってみて改善点や要望があれば、ぜひフィードバックをもらえると嬉しいです。
自分自身が「また使いたい」と思えるものを目指して、少しずつ改善していく予定です。

• ≪新しい記事へ
• 古い記事へ≫

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。