[JS]用途にあったページネーションが実装できるスクリプト -Pajinate

長いリストやコンテンツに表示を小分けにするページネーションを簡単に適用できるスクリプトをThe Silver Liningから紹介します。

デモのキャプチャ

Pajinate – A jQuery Pagination Plugin

デモページでは多種多様なページネーションのデモが数多く紹介されています。

デモのキャプチャ

デモページ

デモのキャプチャ

ノーマル

デモのキャプチャ

リストのサイズをカスタマイズ

デモのキャプチャ

ページネーションを天地に

デモのキャプチャ

スタートをカスタマイズ

デモのキャプチャ

リストをミックス

デモのキャプチャ

ラベルをカスタマイズ

デモのキャプチャ

サブセットをカスタマイズ

Pajinateの実装

実装は簡単です。
既存のリスト要素が下記のように実装されているとします。

HTML(既存)

全体を囲むdiv要素とページネーション用のdiv要素を追加します。

HTML(変更)

スクリプトはjQueryとPajinateを外部ファイルとして指定し、下記のスクリプトを記述します。

JavaScript

スクリプトのオプションではdiv要素やul要素のクラス名の変更、スタートページ、ラベルの名称などが変更できます。

sponsors

top of page

©2018 coliss