Cakephp1.3 pagenateのAjax通信
Cakephpに限らず、最近ページ送りはTwitterの『もっと見るボタン』のようにするのが最近の流行りです。
これはページングをAjax通信することで実現可能なのですが、あちこち確認しながら何とか実現することが出来ました。
今回はCakephp pagenateのAjax通信にて 表示する方法について触れたいと思います。
基本的な考え方
ページ送りをAjax通信する基本的な考え方は以下の通り。
クリックしたら、本来ページを送るはずだった内容をload
$(function(){
$('#pagination .next').click(function() {
var url = 送りたい先のURL;
$('表示したい場所').load(url);
});
});
Twitter風なもっと見るボタンの実装
elements/list.ctp
<?php foreach($lists as $list): ?>
<?php echo $list['List']['title'];?>
<?php endforeach; ?>
elements/paginator.ctp
Twitter風なので、次へボタンだけです。(と、いうか Ajaxでページ送りした場合、戻るボタンって..)
<div id=’pagination’>
<?php echo
$paginator->next(__(‘次’, true).’ >>’, array(), null, array(‘tag’ => ‘span’, ‘class’ => ‘disabled’));
?>
</div>
<?php echo
$paginator->next(__(‘次’, true).’ >>’, array(), null, array(‘tag’ => ‘span’, ‘class’ => ‘disabled’));
?>
</div>
lists_controller.php
<?php
class ListsController extends AppController {
var $uses = array('List');
var $helpers = array('Javascript');
var $components = array('RequestHandler');//必ずこれを呼んでね
function index($id = NULL){
$this->paginate = array(
'sort'=>'List.id',//ソート
'limit'=>10,//１ページあたりの表示件数
'direction'=>'desc',//昇順か降順か,
)
$this->set('new',$this->paginate);
if($this->RequestHandler->isAjax()) {
$this->render('/elements/list');
return;
}
}
}
view/list/index.ctp
<div class="hoge"></div>には、
次へボタンを押したときに読み込まれた内容が表示される場所です。
<div class="posts">
<?php echo $this->element(‘new’);?>
<div class="hoge"></div>
<?php echo $this->element(‘new’);?>
<div class="hoge"></div>
Javascript(と、いうかJquery)
ちょっと考え方にコツがいるのですが、
.nextをクリックすると、.hogeにurlの内容が表示される。
一度次へボタンを押されたあとにもう一度押されることが無いよう、
一度次へボタンをクリックされたらその要素をは削除して、
そのさらに次にクリックされた時の内容を表示するための
<div class="hoge"></div>
を用意してあげるのが、一連の流れ。
$(function(){
$('#pagination .next').click(function() {
var url = $(this).attr("href");
$(this).remove();
$('.hoge:last').load(url);
$(".hoge").after('<div class="hoge"></div>');
return false;
});
});