CakePHPで無限スクロール

CakePHPでの無限スクロール実装をメモします。
今回は下記のプラグインで実装します。

jQueryプラグイン「Infinite Scroll」

コントローラーを作成します。

ProductsController.php

function index(){
	// ページング処理
	$this->set('products',$this->paginate('Product'));
}

ビューを作成します。

index.ctp

<?php echo $this->Html->script('jquery.infinitescroll.min', array('inline' => false)); ?>
<?php echo $this->Html->script('products_index', array('inline' => false)); ?>
<div id="products">
	<?php
		// 表示内容
		foreach($products as $product){
			echo '<div class="product">';
			echo '<h3>'.$post['Product']['title'].'</h3>';
			echo '<p>'.$post['Product']['content'].'</p>';
			echo '</div>';
		}
	?>

	<?php // 次のページへのリンク ?>
	<div id="page-nav">
		<?php echo $this->Paginator->next('次のページ',array('class'=>'next')); ?>
	</div>
</div>

jQueryを実装をします。

products_index.js

$(function() {
	$("#products").infinitescroll({
		navSelector : '#page-nav', // ナビゲーション
		nextSelector : '#page-nav a', // 次ページへのリンク
		itemSelector : '.product', // 次ページ内で探す要素
		loading : {
			finishedMsg : 'これ以上、画像がありません。',
			img : '../img/loader.gif'// ローディング画像
		}
	});
});

以上です。