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

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

自分は本当に不器用だと感じている、下駄です。
 

たくさんのリストをページに表示する時に、「ページング」や「ページネーション」という方法を使うことがありますが、
 

まあまあ、処理が複雑なので、便利に使えるライブラリを作っておきたくて、汎用的なページネーションツールを作ったので、それを紹介しておきます。

本日のIT謎掛け

「ページネーション」と、かけまして、
 

「大きめのピザ」と、ときます。
 

とのココロは・・・
 

量が多すぎる場合に、切り取ります。

ページネーションツール紹介

https://github.com/yugeta/pagenation
 

ソース一式は、githubにアップしているので、cloneしてご使用ください。
 

使い方

sample/
に入っているindex.htmlの中身を見てもらうと簡単に理解できると思いますが、簡単に説明しておきます。
 

基本jsは、下記のようにheadタグ内に記載します。
cloneした場所(階層)に合わせて、書き換えてください。
 

 

そして、bodyタグの下部に、以下を書くだけで、ページネーション表示ができます。
 

 

target : ページネーションを表示させたい、divタグなどのselectorを登録してください。
page_total : ページネーションでのページ総数を登録
page_copunt : 表示が多い場合を考えて、最大表示ページ数を登録します。
query_current : urlアドレスのクエリ値と連携できます。(0スタートの仕様)
between_str : リンクページ数が多い場合の省略箇所に表示する文字列
link_click : リンクをクリックした時に、実行できる処理が書けます。
show_prev_next : 「次」と「前」のリンク表示を切り替えられます。(表示する場合はtrue)
show_first_last : ページの最初(1ページ目)と最終ページへのリンクの表示が切り替えられます。(表示する場合はtrue)

こんな人(場面)におすすめ

システムを構築する際に、意外とめんどくさいページネーション機能ですが、リストの表示件数、ページの総数、現在のページ番号が分かるだけで、このツールに指定するだけで、ページネーション機能を表示することができるので、
 

非常に便利に使えると思います。
 

デザインを変更したい場合は、gitブランチをフォークしてもらって、pagenation.cssを書き換えてもらってもいいし、
別cssで、強制的に書き換えてもらっても構いません。
 

「もう、ここに時間をかけるのは嫌だ」と言う人、ぜひお使いください。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です