[webページライブラリ] Pagenation

自分は本当に不器用だと感じている、ユゲタです。 たくさんのリストをページに表示する時に、「ページング」や「ページネーション」という方法を使うことがありますが、 まあまあ、処理が複雑なので、便利に使えるライブラリを作っておきたくて、汎用的なページネーションツールを作ったので、それを紹介しておきます。

本日の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で、強制的に書き換えてもらっても構いません。 「もう、ここに時間をかけるのは嫌だ」と言う人、ぜひお使いください。