Ajaxを使ったページネーション
ページネーションをAjaxを使って行なう事もできます。通常のページネーションに少しだけ手を加えます。
コントローラの修正
通常、Ajaxを処理する場合にはレスポンス用にヘッダーやフッターのないAjax専用のレイアウトを使用します。コントローラで明示的にAjax専用のレイアウトを指定するか、RequestHandlerコンポーネントを利用します。RequestHandlerコンポーネントを利用すると、リクエストの種類に応じてレイアウトが切り替わります。Ajaxによるリクエストの場合は、レイアウトは「ajax」になり、通常のリクエストの場合のレイアウトは「default」になります。
RequestHandlerコンポーネントを利用する方法
PostsController extends AppController
{
var $components = array('RequestHandler');
function index(){
$this->set('posts',$this->paginate());
}
}
ビューの修正
paginatorヘルパーの設定
paginatorヘルパーが出力するリンクをAjax仕様にします。paginatorヘルパーのoptionsメソッドの'update' キーに更新するDOMエレメントを指定します。'update' キーに値をセットする事で出力するリンクをAjax仕様になります。
特に指定しない限りpaginatorヘルパーはJsヘルパーをインポートして使います。
$paginator->options(array('update' => 'dbrower', 'indicator' => 'spinner'));
上記のオプションはAjaxヘルパーでよく使うオプションです。updateで更新するDOMエレメントのID, indicatorでロード中でに表示するインジケータ用DOMエレメントのIDをそれぞれ指定します。
レイアウト
レイアウトは通常の標準リクエスト用とAjaxリクエストで更新する部分用のレイアウトの２つを使用します。
標準レイアウトではjQueryなどのライブラリを読み込むようにします。また、Ajaxでロード中である事を示すインジケータ用のDOMエレメントを配置する事もあります。
Ajaxで更新する部分のレイアウトはRequestHandlerコンポーネントによって自動的に「ajax」に設定されます。レイアウト「ajax」のファイル名は「ajax.ctp」で標準で用意されいますので、自作する必要は有りません。