[jQuery]ページ送りを実装するプラグインjQuery Pagenation ｜日々の覚書…日常のことも少しだけ

スポンサードリンク

簡単にページ送りを実装できる

jQuery Pagenationを導入しました。

設置の仕方です。

スポンサードリンク

1.jQuery Pagination Pluginのサイトへ行きプラグインをダウンロード

~~jQuery Pagination Plugin~~

※画面の赤枠からダウンロードできます。

<追記>
どうもサイトがなくなっているようです。

16 Beautiful jQuery Pagination Plugins

上記のサイトではダウンロードできるようです。

「jQuery Pagination Plugin」という名前のプラグインで紹介されています。

赤枠からダウンロードできます。

こちらにも用意しました。

Download

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>

jQuery Pagenationデモ

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]で非表示となります。