cakephp1.3でPaginationをjqueryでAjax化する簡単な方法

色々やってみたんですが、jquery.loadで対象のdivをupdateする方法が最も簡単だったのでそれで実装しました。

controllerのコード

<?php
class UsersContorller extends AppController {

  function index () {
    //pagination利用時はajaxに、それ以外はindex.ctpにrenderする
    $this->set('result',$this->paginate('User'));
    if ($this->RequestHandler->isAjax()) {
      $this->render('/elements/userlist');
　　　return;
    }
  }
}

ajaxでページ送りを実装する画面のView

<div id="userlist">
<php echo $this->element('userlist')
</div>

ajaxする箇所はpaginator含めてelement化しました。別にelement使わなくてもいいんだけど。

paginatorを含める理由は簡単で、controllerのpaginateメソッドでhelperの中身を更新してもらう必要があるから。

Ajaxで更新するdivのelement

<?php

<div id="pagination">
   <?php
      if($paginator->hasNext()) {
         echo $paginator->prev('<<前へ', 'class'=>'prev'));
      }
        echo $paginator->numbers(array('class'=>'page'));
      if($paginator->hasNext()) {
        echo $paginator->next('次へ>>', array('class'=>'next'));
      }
    ?>
</div>
 <?php foreach($users as $v):?>
 <?php echo $v;?>
 <?php endforeach;?>
<script type="text/javascript">
$(function(){
    $('#pagination .prev,#pagination .page,#agination .next').click(function() {
        var url = $(this).attr("href");
       $('#userlist').load(url);
        return false;
		});
	});
</script>

hasPrev()とhasNext()を入れているのは、ページ送りが不要な場合でもprevとnextで指定した文字列が出力されてしまうから。numbers()は１ページしかない場合はfalseを返して何も出力しないのでそのままでおk。

jqueryでやってるのは非常に簡単で、prev,number,nextで出力されるaのclassごとにクリックされたらhrefの値をurlに入れてloadで呼び出して更新してるだけです。