jQuery
jQuery

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

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

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

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

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

Query Paginationの設置方法

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

jQuery Pagination Plugin

jQuery-Pagination-Plugin
jQuery-Pagination-Plugin

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

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

16 Beautiful jQuery Pagination Plugins

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

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

jQuery-Pagenation-Pligin
jQuery-Pagenation-Pligin

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

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

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

（参考）
リスト化したページネーションを表示してくれるプラグイン　「Pagination」　#jQuery

jQueryのページネーションは他にも色々あって

迷ったものの一つに『jPages』と言うものありました。

こちらは動きとかいろいろできるようでカッコいいものにする場合はこちらがいいかも。

jPages

【jPageを紹介しているサイト】
[JS]シンプルからかっこいいエフェクト付きまで、ページネーションなら何でも任せろのスクリプト -jPages

関連記事:

jQuery(jQuery)プラグインのWYSIWYGエディタ 「CLEditor」を導入しました。 jQuery(jQuery)自動整列プラグインjQuery masonry jQueryjQueryプラグイン 複数選択可能なmultiselectを使ってみました。 jQuery[jQuery]グラフ表示できる「Highcharts」を使ってみました。 jQuery(jQuery)テキストフォームに入力できるツリーリストを作りました。 EC CUBE(EC-CUBE2.11.4)管理画面：商品管理の商品マスターで一括で公開・非公開と削除できるようにする。 jQuery(jQuery)ajaxのエラーを呼び出す方法 jQuery[jQUery] IE対策のためajaxでのキャッシュの無効化