jQuery ページネーションプラグイン : jqPaginator

この記事では、とても素晴らしいjQueryページネーションプラグイン:jqPaginator。

jqPaginatorは、シンプルで高度にカスタマイズ可能なjQueryページネーションコンポーネントで、さまざまなアプリケーションシーンに適しています。

概要

現在、ネット上にはさまざまなページネーションコンポーネントがありますが、なかなか「思い通り」のものを見つけるのは難しいものです。そこでjqPaginatorが誕生しました。

私が理想とするページネーションコンポーネントは、CSSフレームワークに制限されず、さまざまなスタイルのWebページで使用できることです。浅い経験から言えば、この目標を達成するための重要なポイントは、HTML構造を高度にカスタマイズできることです。そのためjqPaginatorは、合理的な範囲でのカスタマイズを実現し、さまざまなシーンで柔軟に使用できるよう努めています。

効果スクリーンショット：

使用説明

例

使い方はとても簡単です。まずjQueryとjqPaginatorを読み込み、その後ページネーションを初期化するだけです。

$('#id').jqPaginator({
    totalPages: 100,
    visiblePages: 10,
    currentPage: 1,

    first: '<li class="first"><a href="#">First</a></li>',
    prev: '<li class="prev"><a href="#">Previous</a></li>',
    next: '<li class="next"><a href="#">Next</a></li>',
    last: '<li class="last"><a href="#">Last</a></li>',
    page: '<li class="page"><a href="#">{{page}}</a></li>',
    onPageChange: function (num) {
        $('#text').html('当前第' + num + '页');
    }
});

上記の例は最初のデモで、Bootstrapスタイルのページネーションです。具体的なパラメータは後ほど紹介します。ここで理解しておくべきことは、idではなくclassを使用した場合、そのclassのすべての要素が初期化され、上記の「2つのページネーション連動」の効果が実現されるということです。

パラメータ

パラメータ	デフォルト値	説明
totalPages	0	ページネーションの総ページ数を設定します
totalCounts	0	ページネーションの総アイテム数を設定します
pageSize	0	1ページあたりのアイテム数を設定します注意：totalPagesを設定するか、totalCounts + pageSizeを設定する必要があります。そうしないとエラーになります。totalCountsとpageSizeを設定した後、totalPagesが自動的に計算されます。
currentPage	1	現在のページ番号を設定します
visiblePages	7	表示する最大ページ数を設定します（例：全100ページで現在1ページ目の場合、1〜7ページを表示）
disableClass	'disabled'	最初のページ、前のページ、次のページ、最後のページの「無効状態」スタイルを設定します
activeClass	'active'	現在のページ番号のスタイルを設定します
first	(なし)	「最初のページ」のHTML構造を設定します
prev	(なし)	「前のページ」のHTML構造を設定します
next	(なし)	「次のページ」のHTML構造を設定します
last	(なし)	「最後のページ」のHTML構造を設定します
page	(なし)	ページ番号のHTML構造を設定します。ここでは以下を使用できます{{page}}は現在のページを表し、{{totalPages}}は総ページ数を表し、{{totalCounts}}は総アイテム数を表します（例：上記の「ミニマルスタイル」のデモでは、{{プレースホルダー}}を使用し、visiblePagesを1に設定することで実現しています。）
wrapper	(なし)	ページネーション構造のHTMLラッパー。例：。通常は使用しません。
onPageChange	(なし)	コールバック関数。ページが切り替わるときにトリガーされます（最初のページの初期化時を含みます）。「対象ページ」のページ番号が渡されます。

拡張メソッド

jqPaginatorは、初期化後にコンポーネントを操作するための2つの拡張メソッドを提供します。

$('#id').jqPaginator('option', options)

初期化後に設定を動的に変更します

$('#id').jqPaginator('option', {
    currentPage: 1
});

$('#id').jqPaginator('destroy')

jqPaginatorを破棄します

$('#id').jqPaginator('destroy');