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

2020年6月21日

Javascript テクノロジー プログラミング

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

本日の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 : ページの最初(1ページ目)と最終ページへのリンクの表示が切り替えられます。(表示する場合はtrue)

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

システムを構築する際に、意外とめんどくさいページネーション機能ですが、リストの表示件数、ページの総数、現在のページ番号が分かるだけで、このツールに指定するだけで、ページネーション機能を表示することができるので、 非常に便利に使えると思います。 デザインを変更したい場合は、gitブランチをフォークしてもらって、pagenation.cssを書き換えてもらってもいいし、 別cssで、強制的に書き換えてもらっても構いません。 「もう、ここに時間をかけるのは嫌だ」と言う人、ぜひお使いください。

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ