test

CakePHP Note

Ajaxを使ったページネーション

UPDATE:2008.05.07

ページネーションをAjaxを使って行なう事もできます。通常のページネーションに少しだけ手を加えます。

コントローラの修正

通常、Ajaxを処理する場合はヘッダーやフッターのないAjax専用のレイアウトを使用します。コントローラで明示的にAjax専用のレイアウトを指定するか、RequestHandlerコンポーネントを利用します。RequestHandlerコンポーネントを利用すると、リクエストの種類に応じてレイアウトが切り替わります。Ajaxによるリクエストの場合は、レイアウトは「ajax」になり、通常のリクエストの場合のレイアウトは「default」になります。

RequestHandlerコンポーネントを利用する方法

PostsController extends AppController
{
    var $components = array('RequestHandler'); 
    function index(){
        $this->set('posts',$this->paginate());
    }

}

ビューの修正

レイアウト

大枠のレイアウトとAjaxで更新する部分のレイアウトの２つを使用します。
大枠のレイアウトではprototype.jsを読み込むようにします。また、Ajaxでロード中である事を示すインジケータ用のDOMエレメントを配置する事もあります。
Ajaxで更新する部分のレイアウトはRequestHandlerコンポーネントによって自動的に「ajax」に設定されます。レイアウト「ajax」のファイル名は「ajax.ctp」で標準で用意されいますので、自作する必要は有りません。

アクションに対するビューの修正

更新するDOMエレメントをpaginatorヘルパーのoptionsメソッドで指定します。

$paginator->options(array('update' => 'dbrower', 'indicator' => 'spinner'));

上記のオプションはAjaxヘルパーでよく使うオプションです。updateで更新するDOMエレメントのID, indicatorでロード中でに表示するインジケータ用DOMエレメントのIDをそれぞれ指定します。