ページネーション(ページ送り) pagination

複数の要素をページのように分けて表示し切り替えるページネーション(ページ送り)を実装するライブラリです。
なお、提供しているのは機能のみで装飾(CSS)は含まれていません。

デモ

アイテム数17個に対し、1ページに3つを表示するデモです。

item 1

item 2

item 3

item 4

item 5

item 6

item 7

item 8

item 9

item 10

item 11

item 12

item 13

item 14

item 15

item 16

item 17

ライブラリのダウンロードと設置

次のようにページネーションを適用するHTMLを準備します。

HTML

「ライブラリのダウンロード」をクリックしてダウンロードしてください。
ライブラリのダウンロード

ダウンロードしたjquery.pagination.jsを任意の場所へ置き読み込みます。
(jQueryの設置および読み込みは、完了もしくは同時作業を行っているものとします。)

HTML

JavaScriptを次のように記述します。

JavaScript

オプションの詳しい説明は オプション を参照してください。

オプション

次の設定が可能です。

オプション名 初期値 説明
itemElement null アイテムの要素。
defaultDisplayPageNumber 1 最初に表示するページのページ番号。
displayItemCount 10 1ページ毎に表示する個数。
prevNextPageBtnMode true 前・次のページへ移動するボタン機能の有無。
firstEndPageBtnMode false 最初・最後のページへ移動するボタン機能の有無。
bothEndsBtnHideDisplay true 先端または終端時に前へ・次へボタンを非表示にするかどうか。
pageLinkMode true ページ番号のリンク要素を追加するかどうか。
pageNumberLinkPrefix '#page-' ページ番号のhrefの接頭文字列。
pageNumberDisplayNumber 0 ページ番号の表示個数。
例えばページ数が9つあったとして3と指定すると、現在位置が6の場合、5・6・7のページ番号が表示される。
0を指定すると、全てのページ番号が表示される。
onePageOnlyDisplay true 1ページのみの場合にページネーションを表示するかどうか。
onePageOnlyPrevNextPageDisplay false 1ページのみの場合に前・次のページへ移動するボタンを表示するかどうか。
onePageOnlyFirstEndPageDisplay false 1ページのみの場合に最初・最後のページへ移動するボタンを表示するかどうか。
pageInfoDisplay false ページ情報の表示の有無。
pageInfoFormat 'Page %n / %m' ページ情報の表示する文字列の書式。
ellipsisMode false 省略記号を表示するかどうか。
ellipsisText '...' 省略記号。
ellipsisMaxPageNumber 20 省略記号が表示される最大ページ数。
clickUserFunction null クリックのユーザー定義関数(この機能を使うとページ切り替えが行われない)。
wrapElement 'div' 親要素を包む要素。
prevBtnText '<' 前のページへ移動するボタンの文字列(要素指定可能)。
nextBtnText '>' 次のページへ移動するボタンの文字列(要素指定可能)。
firstPageBtnText '<<' 最初のページへ移動するボタンの文字列(要素指定可能)
endPageBtnText '>>' 最後のページへ移動するボタンの文字列(要素指定可能)。
paginationClassName '' ページネーション本体のクラス名。
paginationInnerClassName '' ページネーション本体の内側のクラス名。
pageNumberClassName '' ページ番号のクラス名。
currentPageNumberClassName 'current' カレントページ番号のクラス名。
prevBtnClassName 'prev-page' 前のページへ移動するボタンのクラス名。
nextBtnClassName 'next-page' 次のページへ移動するボタンのクラス名。
firstBtnClassName 'first-page' 最初のページへ移動するボタンのクラス名。
endBtnClassName 'end-page' 最後のページへ移動するボタンのクラス名。
prevNextBtnDisabledClassName 'disabled' 前・次のページへ移動するボタンの機能無効時のクラス名。
ellipsisClassName 'ellipsis' 省略記号のクラス名。
pageInfoClassName 'page-info' ページ番号表示のクラス名。
setPagination '' ページネーションを設置する箇所。
setPaginationMode 'after' ページネーションを設置する方法。
changeStartCallback function() {} 切り替え開始時のコールバック関数。
changeEndCallback function() {} 切り替え終了時のコールバック関数。

JavaScript

メソッド

以下のメソッドが実行可能です。

メソッド名 説明
$element.getStatus() ステータスを取得。戻り値はハッシュ(連想配列)で、状態、現在のページ、最大ページ、最初のページ、遷移したページの履歴を返す。
$element.movePrevPage
(callback, startCallback)
前のページへ移動する。
第一引数に移動終了時のコールバック関数、第二引数に移動開始時のコールバック関数を指定可能。
$element.moveNextPage
(callback, startCallback)
次のページへ移動する。
第一引数に移動終了時のコールバック関数、第二引数に移動開始時のコールバック関数を指定可能。
$element.moveFirstPage
(callback, startCallback)
最初のページへ移動する。
第一引数に移動終了時のコールバック関数、第二引数に移動開始時のコールバック関数を指定可能。
$element.moveEndPage
(callback, startCallback)
最後のページへ移動する。
第一引数に移動終了時のコールバック関数、第二引数に移動開始時のコールバック関数を指定可能。
$element.movePage
(pageNumber, callback, startCallback)
指定のページへ移動する。
第一引数(必須)に移動するページ番号、第二引数に移動終了時のコールバック関数、第三引数に移動開始時のコールバック関数を指定可能。

JavaScript

ページネーションのCSSセレクター

ページネーションに対してスタイル(CSS)を当てる際などに参考にしていただければと思います。

CSS