自分は本当に不器用だと感じている、ユゲタです。
たくさんのリストをページに表示する時に、「ページング」や「ページネーション」という方法を使うことがありますが、
まあまあ、処理が複雑なので、便利に使えるライブラリを作っておきたくて、汎用的なページネーションツールを作ったので、それを紹介しておきます。
本日のIT謎掛け
「ページネーション」と、かけまして・・・
「大きめのピザ」と、ときます。
とのココロは・・・
量が多すぎる場合に、切り取ります。
ページネーションツール紹介
https://github.com/yugeta/pagenation
ソース一式は、githubにアップしているので、cloneしてご使用ください。
使い方
sample/に入っているindex.htmlの中身を見てもらうと簡単に理解できると思いますが、簡単に説明しておきます。
基本jsは、下記のようにheadタグ内に記載します。
cloneした場所（階層）に合わせて、書き換えてください。
<script src="（設置した階層）pagenation.js"></script>
そして、bodyタグの下部に、以下を書くだけで、ページネーション表示ができます。
<script>
new $$pagenation({
target : ".pagenation",
page_total : 10,
page_count : 5,
query_current : "num",
between_str : "..",
link_click :function(num){},
show_prev_next : true,
show_first_last : false
});
</script>
target : ページネーションを表示させたい、divタグなどのselectorを登録してください。
page_total : ページネーションでのページ総数を登録
page_copunt : 表示が多い場合を考えて、最大表示ページ数を登録します。
query_current : urlアドレスのクエリ値と連携できます。（0スタートの仕様）
between_str : リンクページ数が多い場合の省略箇所に表示する文字列
link_click : リンクをクリックした時に、実行できる処理が書けます。
show_prev_next : 「次」と「前」のリンク表示を切り替えられます。（表示する場合はtrue）
show_first_last : ページの最初（１ページ目）と最終ページへのリンクの表示が切り替えられます。（表示する場合はtrue）
こんな人（場面）におすすめ
システムを構築する際に、意外とめんどくさいページネーション機能ですが、リストの表示件数、ページの総数、現在のページ番号が分かるだけで、このツールに指定するだけで、ページネーション機能を表示することができるので、
非常に便利に使えると思います。
デザインを変更したい場合は、gitブランチをフォークしてもらって、pagenation.cssを書き換えてもらってもいいし、
別cssで、強制的に書き換えてもらっても構いません。
「もう、ここに時間をかけるのは嫌だ」と言う人、ぜひお使いください。
