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'// ローディング画像
        }
    });
});

以上です。