スポンサードリンク

簡単にページ送りを実装できる
jQuery Pagenationを導入しました。
設置の仕方です。
スポンサードリンク
1.jQuery Pagination Pluginのサイトへ行きプラグインをダウンロード
jQuery Pagination Plugin

※画面の赤枠からダウンロードできます。
<追記>
どうもサイトがなくなっているようです。
16 Beautiful jQuery Pagination Plugins
上記のサイトではダウンロードできるようです。
「jQuery Pagination Plugin」という名前のプラグインで紹介されています。

赤枠からダウンロードできます。
こちらにも用意しました。
2.ファイルをアップロードする
pagination.cssとjquery.pagination.jsを設置するフォルダにアップします。
今回はcssフォルダとjsフォルダに置きました。
css/pagination.css
js/jquery.pagination.js
※ご使用の環境によってアップするフォルダは変えてください。
スポンサードリンク
3.head内にファイルを読み込む
<link href="css/pagination.css" rel="stylesheet" media="all" type="text/css" /> <script type="text/javascript" src="js/jquery.pagination.js"></script> <script type="text/javascript"> function pageselectCallback(page_index, jq){ var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone(); $('#Searchresult').empty().append(new_content); return false; } function initPagination() { var num_entries = jQuery('#hiddenresult div.result').length; $(".Pagination").pagination(num_entries, { callback: pageselectCallback, items_per_page:1, }); } $(document).ready(function(){ initPagination(); }); </script>
4.ページ送りを使いたいところに以下の設定をする
<div class="Pagination pagination clearfix"><!-- ここにページネーションを表示 --></div> <div id="Searchresult"><!-- ここにコンテンツを表示 --></div> <div id="hiddenresult" style="display: none;"> <div class="result"> <h2>1ページ目</h2> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> </div> <div class="result"> <h2>2ページ目</h2> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> </div> <div class="result"> <h2>3ページ目</h2> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> </div> <div class="result"> <h2>4ページ目</h2> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> </div> <div class="result"> <h2>5ページ目</h2> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> <p>クラス名resultの内容が入ります。</p> </div> </div> <div class="Pagination pagination clearfix"><!-- ここにページネーションを表示 --></div>
class名resultの部分がリスト化されます。
本来はクラス名「Pagination」はID名で記述してあったのですが、
ページ送りを下にも表示させたかったのでクラス名にしています。
下にも表示させる予定がなければ
head内に記述したJavascriptとHTMLのクラス名の部分を
下記のようにID名に戻しておいてください。
※コードのハイライトしている部分です。
<div id="Pagination" class="pagination clearfix"><!-- ここにページネーションを表示 --></div>
また、ページネーションを表示させるところで
clearfixを指定していますが、
これは指定しないとクラス名resultで指定箇所が
回り込んでしまうためです。
リンク先のデモでは
ページネーションの次の行で
<br style="clear:both;">
上記の様にfloatを解除してました。
clearfixは共通のcssになければ書き足してください。
(参考)
clearfixで指定するfloatの解除|上級CSSレイアウト講座
スポンサードリンク
5.オプションの設定
オプションの設定
head内の(ここにオプションを入れる)部分にオプションの設定ができます。
記述方法
オプション名:値,
記述例
next_text:”次の項目へ”,
prev_text:”前の項目へ”,
num_display_entries:5,
num_edge_entries:1,
ellipse_text:”・・”,
オプション名 | 値 | 解説 |
current_page | 数値 | ページネーションで表示させるリストの初期値 リストの1番目を表示したいときは0と記述 |
num_display_entries | 数値 | 表示するリスト数 |
next_text | 文字列 | [next]部分のテキストを変更します。 日本語を利用する場合は["]で囲みます。例 ["次の項目へ"] |
prev_text | 文字列 | [prev]部分のテキストを変更します。 日本語を利用する場合は["]で囲みます。例 ["前の項目へ"] |
num_edge_entries | 数値 | リストの項目が多く全リストが見えない時に両端に表示するリストの数を指定できます。 デフォルトは[0]で、表示させていません。 |
ellipse_text | 文字列 | num_edge_entriesにて設定したときの両端に表示するリストと中央に表示されるリストの間に表示される文字を指定できます。デフォルトは[…]です。 日本語を利用する場合は["]で囲みます。 |
next_show_always | 真偽 | [next]部分を表示させるか設定します。 デフォルトは[true]で表示させています。[false]で非表示となります。 |
prev_show_always | 真偽 | [prev]部分を表示させるか設定します。 デフォルトは[true]で表示させています。[false]で非表示となります。 |
(参考)
リスト化したページネーションを表示してくれるプラグイン 「Pagination」 #jQuery
他にもjPagesと言うものありました。
こちらは動きとかいろいろできるようでカッコいいものにする場合はこちらがいいかも。
jPageを紹介しているサイト
[JS]シンプルからかっこいいエフェクト付きまで、ページネーションなら何でも任せろのスクリプト -jPages
スポンサードリンク