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

スポンサードリンク

ページ送りを作るのは結構難しいですけど、

jQueryを使うと簡単に実装できます。

その中でも、簡単にページ送りを実装できる

jQuery Pagenationというものがあるので

それをを導入してみました。

スポンサードリンク

Query Paginationの設置方法

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

~~jQuery Pagination Plugin~~

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

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

16 Beautiful jQuery Pagination Plugins

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

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

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

念のためにこちらのページにダウンロードできるものを用意しました。

Download

ファイルをアップロードする

『pagination.css』と『jquery.pagination.js』を設置するフォルダにアップします。

今回はcssフォルダとjsフォルダに置きました。

●cssフォルダ
【css/pagination.css】

●jsフォルダ
【js/jquery.pagination.js】

※ご使用の環境によってアップするフォルダは変えてください。

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>

headタグ内にjsファイルの読み込みと必要なjavascriptを記述をします。

ページ送りを使いたいところにページネーションをする

<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名【Pagination】の部分にページネーションが設置されます。

本来はクラス【Pagination】はID名で記述してあったのですが、

ページ送りを下にも表示させたかったのでクラス名にして複数設置できるようにしています。

下にも表示させる予定がなければ

head内に記述したJavascriptとHTMLのクラス名の部分を

下記のようにID名に戻しておいてください。
※コードのハイライトしている部分です。

・・・
<script type="text/javascript">
  function initPagination() {
      var num_entries = jQuery('#hiddenresult div.result').length;
      $("#Pagination").pagination(num_entries, {
          callback: pageselectCallback,
・・・
<div id="Pagination" class="pagination clearfix"><!-- ここにページネーションを表示 --></div>
・・・

また、ページネーションを表示させるところで

clearfixを指定していますが、

これは指定しないとクラス名resultで指定箇所が

回り込んでしまうためです。

リンク先のデモでは

ページネーションの次の行で

<br style="clear:both;">

上記の様にfloatを解除してました。

clearfixは共通のcssになければ書き足してください。

(参考)
clearfixで指定するfloatの解除｜上級CSSレイアウト講座

オプションの設定

●オプションの設定
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]で非表示となります。