Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

ブログを移転しました。

Tecuration.com

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

シンプルなUIのページネーション「simplePagination.js」

ライブラリ名まんまの記事タイトル。笑
シンプルで使いやすそうなページネーションのjQueryプラグインをご紹介。

simplePagination.js


まず見た目がシンプル。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>


JavaScript


10個のページを表示させるには以下のようにコーディング。シンプルといえど、たくさんのオプションがあるので、詳細はドキュメントを参照してほしい。

$(function() {
    $('#pageNation').pagination({
        items: 100,
        itemsOnPage: 10,
        cssStyle: 'light-theme'
    });
});


はてなブログでも自分の好きなページネーションが設置できるといいんだけどなー。というわけで、ページネーションを探している人は参考にどうぞ。