シンプルなUIのページネーション「simplePagination.js」
ライブラリ名まんまの記事タイトル。笑
シンプルで使いやすそうなページネーションのjQueryプラグインをご紹介。
まず見た目がシンプル。UIに凝ったページネーションもあるがまぁ配置するサイトを選ぶわけで、やっぱりこういったシンプルなものは定番として人気があるのではないか。
実装方法
実装方法もいたってシンプル。以下に一例を記しておく。
HTML
headタグ内で以下3つを読み込む。
<script type="text/javascript" src="path_to/jquery.js"></script> <script type="text/javascript" src="path_to/jquery.simplePagination.js"></script> <link type="text/css" rel="stylesheet" href="path_to/simplePagination.css"/>
bodyタグ内ではページネーションを配置したい箇所に任意のidなりclassでマークダウン。
<div id="pageNation"></div>
10個のページを表示させるには以下のようにコーディング。シンプルといえど、たくさんのオプションがあるので、詳細はドキュメントを参照してほしい。
$(function() { $('#pageNation').pagination({ items: 100, itemsOnPage: 10, cssStyle: 'light-theme' }); });
はてなブログでも自分の好きなページネーションが設置できるといいんだけどなー。というわけで、ページネーションを探している人は参考にどうぞ。