データベースで登録されている件数を読み込んで表示し、
表示されている件数をinfinitescrollでもっと見る機能を作成するプログラムを紹介したいと思います。
プログラムの流れとしては、
まず、phpでデータベースからデータを取得し表示する。
|
1 2 3 4 5 6 7 8 9 10 11 | <?php if (!empty($limit)):?> <?php foreach($limit as $row):?> <div class="centerBox cf items"> <div class="archiveBox"> <p class="name"><?php echo $row["name"];?></p> <p class="mail"><span><?php echo $row["mail"];?></span></p> <p class="phone"><span><?php echo $row["phone"];?></span></p> <p class="address"><span><?php echo $row["address"];?></span></p> </div> <?php endforeach; ?> <?php endif;?> |
次はphpでページングを作成する。(一ページに何件を表示するか決めて、ページングを作成します。)
ページング機能の作成はこちら
infinitescrollの実装をします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script> <script src="js/jquery.infinitescroll.min.js"></script> <script> $(function(){ $('#contents .centerBox').infinitescroll({ navSelector : ".navigation", // ナビゲーション要素を指定します。 nextSelector : ".navigation p.more a", // ナビゲーションの「次へ」の要素を指定します。 itemSelector : "#contents .centerBox a.archiveAnchor", // 表示させる要素を指定します。 dataType : "php" // 読み込むデータの形式を指定します。 }); }); </script> |
今回はjQueryプラグインを適用したい要素は「#contents .centerBox」ですので、
上記のように定義します。
つぎは3つのオプションを指定します。
navSelector：次に読み込む要素を囲む要素を指定します
nextSelector：次に読むこむ要素自体を囲む要素を指定します
itemSelector：表示させたい要素を指定します
一ページの続きとして表示したいコンテンツを指定するコードは、
データベースからデータを取得するコードの下に書きます。
|
1 2 3 4 5 6 7 8 | <div class="navigation"> <?php if($totalPages > 1):?> <?php if($page < $totalPages):?> <!-- <a href="page2.php">next page?</a> --> <p class="more"><a href="index.php?page=<?php echo $page+1;?>">もっと見る</a></p> <?php endif;?> <?php endif;?> <!-- /.navigation --></div> |
|
1 | index.php?page=<?php echo $page+1; |
現在のページ番号のプラス１して次のページを表示させています。
