ページネーション（ページ送り） 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