CodeIQ MAGAZINECodeIQ MAGAZINE

面倒なページネーション実装よさらば!jQueryでサクッとページネーション実装を実現するプラグインはこれだ! #jQuery #javaScript #CSS

2014.02.27 Category:技術コラム Tag: , ,

  • 26
  • このエントリーをはてなブックマークに追加

大量のコンテンツを複数ページに分けてすっきり見やすくしたい。そんな時にお役立ちなページネーションはスマートにコンテンツが表示されて便利な上見栄えも良い!でも、実装はちょっと面倒そう…そんな風に思っていませんか?
今回はJavaScript&CSSと一緒に組み込むだけでサクッとページネーションが実装可能な、お役立ちjQueryプラグインをご紹介します!
by hibikiYzk

ページネーションとは

長いコンテンツの表示に良く利用されるページネーション。ページャーやページ送りとも言われます。ページネーションは、長い文章を複数のページに分割して各ページへのリンクを並べアクセスしやすくする、もしくは一枚のページの内部で長い文章を分割し切り替えて表示する機能のことです。デザインや機能も様々で、バリエーションに富んだページネーションがたくさんのサイトで利用されているのを目にすることも多いのではないでしょうか。さらにスマートフォン用になるとボタンが小さいと押しにくいことから、PCとは異なるデザインや機能を持つものも登場してきました。

そんなページネーションですが、実装方法も様々です。システムの絡むWebページならPHPやRubyのライブラリで実装したり、そうでなければJavaScriptやjQueryなどで実装する方法がメジャーです。今では実に多くの便利なプラグインが配布されていて、本当に簡単にページネーションが実装できるようになりました。一昔前にはそのようなプラグインが無く、htmlとセッションのゴリゴリの力技で実装を行うという苦い事件もありましたが、今回はそんな便利なjQueryプラグインの恩恵にあやかり、数あるプラグインの中でも非常に簡単にページネーション実装ができる「simplePagination.js」を使った実装方法をご紹介したいと思います。

「simplePagination.js」を利用したページネーション実装

サクッとページネーションが実装できる!

simplePagination.jsの使い方は非常にシンプルです。また、お好みに応じて選べるシンプルで使い勝手の良い3種類のテーマ[light-theme,dark-theme,compact-theme]が用意されているので、Webページのデザインにも合わせやすいのが特徴。さらにBootstrapもサポートしています!オプション類も充実しているので、公式サイトでチェックしてみてください。

使用方法

まずはhttp://flaviusmatis.github.io/simplePagination.js/からファイル一式をダウンロードします。ファイルをダウンロードしたら「jquery.simplePagination.js」「simplePagination.css」を作業フォルダにコピーし、パスを通します。この時、GoogleのCDN(※Contents Delivery Network)にもパスを通しておきましょう。

次にスクリプトを記載します。今回は総ページング数3ページで、テーマはlight-themeを使用する設定でカスタマイズしています。総ページ数やテーマ、「前へ・次へ」へのリンクテキストの文字はお好みに応じて調整してください。

次はページング本体をページ側の任意の場所に埋め込みます。
このタグを埋め込んだ部分にページングが表示されます。

<div class="pager"></div>

次にページングプラグインとコンテンツの連動です。
プラグインとコンテンツはid部分で連動させます。連動させるコンテンツ部分にclass="selection" id="page-1"を記述します。idの数値はページング数なので、表示ページに応じて調整して下さい。今回はデモページの1列目、2列目、3列目にページネーション処理を行いたいと思いますので、コードは下記になります。

<table class="selection" id="page-1">
    <tr>
        <td><IMG src="img/worksResults/imgMst1.jpg"></td>
        <td><IMG src="img/worksResults/imgMst1.jpg"></td>
        <td><IMG src="img/worksResults/imgMst1.jpg"></td>
    </tr>
</table>
<table class="selection" id="page-2">
    <tr>
        <td><IMG src="img/worksResults/imgMst2.jpg"></td>
        <td><IMG src="img/worksResults/imgMst2.jpg"></td>
        <td><IMG src="img/worksResults/imgMst2.jpg"></td>
    </tr>
</table>
<table class="selection" id="page-3">
    <tr>
        <td><IMG src="img/worksResults/imgMst3.jpg"></td>
        <td><IMG src="img/worksResults/imgMst3.jpg"></td>
        <td><IMG src="img/worksResults/imgMst3.jpg"></td>
    </tr>
</table>

最後に、CSS側に最初だけ表示させる制御を組み込めば完成です!

.selection {display: none;}
#page-1 { display: block;}

では早速レンダリングしてみましょう。

■初期表示
ページ1に表示するコンテンツのみが表示されました。
ページャー部分もきちんと動作していますね。

■ボタン2押下時
ページ2に表示するコンテンツのみの表示に切り替わりました。
ボタン2の代わりに>>ボタン押下でも同じ動きです。

■ボタン3押下時
ページ3に表示するコンテンツのみの表示に切り替わりました。
そして最終ページなので>>ボタンは非活性に。

以上、たったこれだけの手順で見事、ページネーションが実装できました!
見栄えも機能性も素晴らしいページネーションをサクッと実装できるsimplePagination.js。このプラグインの特に良い点は表示ページごとにページを切り分けなくて良いところだと思っています。別ページに切り分けるのは正直、手間です。それにこの方法ならコンテンツが増えたり変更になっても、修正範囲は1ページだけなのでメンテナンスに手間がかかりませんね。そういった意味でも使いやすいプラグインということで、今回はご紹介させて頂きました。

jQueryを使った便利なプラグイン紹介

さて今回はページネーション機能実装用のjQueryプラグインをご紹介しました。
ほかにも、jQueryを使ったプラグインは便利なものがたくさんあります。最後に、知って楽しい使って便利なjQueryプラグインをいくつかご紹介して、この記事の締めとさせて頂きたいと思います。

Sweet AJAX Tabs

jQueryを使ったタブを実装できるプラグインです。タブの切り替え時にアニメーションが走るのがリッチで面白いですね。

Scrolld.js

スクロール時にページ上部にナビゲーションを固定表示します。さらにコンテンツの移動はアニメーションでスクロール。リッチな動きを実装できる、縦型コンテンツ向けのプラグインです。

AnimateScroll

スクロールに様々なエフェクトをかけられるプラグインです。ぬるっとスクロールしたり、加速したり、急速に動いたかと思えば突然減速したり。その数なんと30種類以上!Webページに動きをつけたい時に活用できそうですね。

CodeIQ運営事務局より

CodeIQではスキルチェックにぴったりの実力判定問題を出題中!
ぜひ挑戦してみてくださいね!

  • 26
  • このエントリーをはてなブックマークに追加

■この記事を書いた人

avatar

hibikiYzk

大阪を拠点に活動するwebクリエイター/フリーライター。「やりたいをカタチに」をスローガンにweb制作や記事の執筆活動を行っています。システム開発やweb制作現場での経験を元に、日常の業務でちょっと使えるネタをご紹介していきます。

■関連記事

製品データの活用方法を考える!WebGLで3DCG描画する「きゃん家!」技術解説(3)#5jcup... 製品データの活用方法を考える 第1回、第2回で紹介してきた通り、「きゃん家!」は「HTML5 Japan Cup(以下5jCup)」の花王賞を狙って開発したWebアプリです。賞のテーマである「花王製品カタログサイトを徹底的にリ・デザインしてください!」に沿って次世代型3DCGカタログを作り上げまし...
3DモデルをWebGLで描画する「きゃん家!」技術解説(2)──外部3Dデータの読み込み・描画処理 ... 3DきゃんちをWebGLで描画する モデルデータ(PMXファイル)を読み込む jThreeの松田光秀です。 前回は「きゃん家!」の特徴や、音声合成、開発の舞台裏などを中心にレポートしました。 次世代型3DCGカタログ「きゃん家!」 3DきゃんちモデルはMMD(MikuMikuDance)で使...
WebGLで3DCG描画!jThreeを活用した次世代型カタログ「きゃん家!」技術解説(1) #5j... 「きゃん家!」のチーム発足から応募まで jThreeの松田光秀です。 今回ご縁があり、「チームきゃん家!」に参加することになりました。 この連載では「きゃん家!」開発の裏側について解説していきたいと思います。 「きゃん家!」は「HTML5 Japan Cup(以下5jCup)」の花王賞を狙って開...
Sizzleに独自の擬似セレクターを追加する方法──完全一致版:containsを作ろう #jque... 問題 Sizzle の :contans() 擬似セレクターは部分一致のため完全一致で探したいときに使えない 例えば、「申請」ボタンだけ disabled にしたいとき、「申請取消」ボタンまで disabled になってしまいます。 html:
あなたは大丈夫?今さら間違えたら恥ずかしいHTML/CSS用語の読み方 #HTML #CSS... 正しく読んでいますか?プロでも読めない意外な事実 HTMLタグやCSSプロパティの読み方は多種多様、実は正式な読み方というのはあまり浸透していません。それだけ制作現場ではあまり重きを置かれない読み方。 特に面白いのが横幅を指定する"width"。正しくは"ウィズ"(厳密に発音するとdを微妙に発音...
レスポンシブWebデザインを実現する3つの技術を簡単解説 #HTML5 #CSS... レスポンシブWebデザインは魔法じゃない! 例えばPC閲覧時に表示されていたバナーやメニューがスマホ閲覧時だと表示されなくなったり、全く違う形のコンテンツに変化していたりと何かとトリッキーな動きをしがちなレスポンシブWebデザイン。 そんな魔法のような事を実現させるには何かとんでもなく難しい...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ