phpとinfinitescrollのもっと見る機能

データベースで登録されている件数を読み込んで表示し、

表示されている件数をinfinitescrollでもっと見る機能を作成するプログラムを紹介したいと思います。

プログラムの流れとしては、

まず、phpでデータベースからデータを取得し表示する。


<?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 if (!empty($limit)):?>

<?php foreach($limit as $row):?>

</div>

<?php endforeach; ?>

<?php endif;?>

次はphpでページングを作成する。(一ページに何件を表示するか決めて、ページングを作成します。)
ページング機能の作成はこちら

infinitescrollの実装をします。


<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>

$(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：表示させたい要素を指定します

一ページの続きとして表示したいコンテンツを指定するコードは、
データベースからデータを取得するコードの下に書きます。


<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>