CakePHP3で通常のページネーションのように画面を再表示せず、Ajaxで一覧部分だけを切り替える方法を紹介したいと思います。
バージョン
CakePHP 3.6
画面
高校野球の歴代優勝校の一覧を作ったので、これを例にします。
データ
high_schoolsテーブルに2000年以降のデータが入っています。
| id | year | name | area | prefecture |
|---|---|---|---|---|
| 1 | 2000 | 智弁和歌山 | 近畿 | 和歌山 |
| 2 | 2001 | 日大三 | 関東 | 東京 |
| 3 | 2002 | 明徳義塾 | 四国 | 高知 |
| … | ||||
| 19 | 2018 | 大阪桐蔭 | 近畿 | 大阪 |
Controller
indexが元になる画面で、listはAjaxで一覧部分を取得するためのものです。
検索はfriendsofcake/searchで行います。
/src/Controller/HighSchoolsController.php
public function index()
{
$area = ['北海道' => '北海道', '東北' => '東北', '関東' => '関東', '中部' => '中部', '近畿' => '近畿', '中国' => '中国', '四国' => '四国', '九州' => '九州'];
for ($i = 2000;$i <= 2018;$i++) {
$years[$i] = $i;
}
$this->set(compact('area', 'years'));
}
public function list()
{
if ($this->request->is('ajax')) {
$this->viewBuilder()->setLayout('');
$high_schools = $this->HighSchools
->find('search', ['search' => $this->request->getQueryParams()])
->order(['year' => 'DESC']);
$high_schools = $this->paginate($high_schools);
$this->set(compact('high_schools'));
}
}
Template
index.ctpで検索部分を作ります。
jsにURLを渡しておきます。
検索ボタンはsubmitではなくただのbuttonにします。
/src/Template/HighSchools/index.ctp
<?php
$this->Html->script('high_schools', ['block' => true]);
$this->Html->scriptStart(['block' => true]);
echo 'var baseUrl = "'.$this->Url->build('/high-schools', false).'";';
$this->Html->scriptEnd();
?>
<h1>高校野球 歴代優勝校</h1>
<?= $this->Form->create(null, ['id'=>'search']) ?>
<label>年</label>
<?= $this->Form->select('year_from', $years, ['empty'=>true]) ?> ~ <?= $this->Form->select('year_to', $years, ['empty'=>true]) ?>
<label>地域</label>
<?= $this->Form->select('area', $area, ['empty'=>'地域を選択してください']) ?>
<?= $this->Form->button('検索', ['type'=>'button', 'id' => 'button']) ?>
<?= $this->Form->end() ?>
<div id="ajax_template"></div>
list.ctpはページネーションと一覧のみです。
/src/Template/HighSchools/list.ctp
<ul class="pagination">
<?php
if ($this->Paginator->hasPrev()) {
echo $this->Paginator->prev('<');
}
echo $this->Paginator->numbers();
if ($this->Paginator->hasNext()) {
echo $this->Paginator->next('>');
}
?>
</ul>
<table>
<thead>
<tr>
<th>年</th><th>高校</th><th>地域</th><th>都道府県</th>
</tr>
</thead>
<tbody>
<?php foreach($high_schools as $high_school){ ?>
<tr>
<td><?= $high_school->year ?></td>
<td><?= $high_school->name ?></td>
<td><?= $high_school->area ?></td>
<td><?= $high_school->prefecture ?></td>
</tr>
<?php } ?>
</tbody>
</table>
Model
friendsofcake/searchで検索できるようにします。
/src/Model/Table/HighSchoolsTable.php
public function searchManager()
{
$searchManager = $this->behaviors()->Search->searchManager();
$searchManager
->add('year_from', 'Search.Compare', ['operator' => '>=', 'field' => 'year'])
->add('year_to', 'Search.Compare', ['operator' => '<=', 'field' => 'year'])
->value('area');
return $searchManager;
}
JavaScript
そして肝心のjsです。
Ajaxでhigh-schools/listにアクセスして、戻り値としてlist.ctpの中身を受け取り、jqueryでHTMLを書き換えています。
Ajaxのurlは検索ボタンが押下されたときは入力項目のnameとvalueから作成します。
ページネーションのリンクが押下されたときはdata属性のurlから取得しています。
あらかじめページネーションのリンクは無効にして、元のhrefの値はdata属性のurlに保持しておくのがポイントです。
/webroot/js/high_schools.js
$(function(){
// 検索ボタン押下時
$(document).on('click', '#button', function() {
// 検索の入力項目からurlを生成
var url = baseUrl + '/list?';
$('#search select').each(function(index, element) {
if($(this).val()){
url += $(this).attr('name') + '=' + $(this).val() + '&';
}
});
searchList(url);
});
// ページネーションのリンク押下時
$(document).on('click', '.pagination a', function() {
var url = $(this).data('url');
if(url){
searchList(url);
}
});
// 初期表示の一覧を取得するため検索ボタン押下
$('#button').click();
});
// 一覧を取得
function searchList(url){
$.ajax({
url:url,
type:'POST',
})
.done(function(data){
$('#ajax_template').html(data);
linkDisable();
});
}
// ページネーションのリンクを無効化し、data属性のurlに遷移先を保持
function linkDisable(){
$('.pagination a').each(function(index, element) {
if(!$(this).data('url')){
$(this).data('url', $(this).attr('href'));
$(this).attr('href', '#');
}
});
}