CakePHP3でjQueryのajaxを使って表示の切り替えをする方法
63 回閲覧されました
みなさんこんにちは、jonioです。
今回はCakePHP3でテーブルの情報を表示しているのをjQueryのajaxを使ってタブを押すことで表示を切り替える方法を解説します。
おすすめ参考書
CakePHP3はまだまだ仕事で使われます。
下記の参考書がおすすめです。
状況
名前の読み方で表示の切り替えをします。
使うテーブル
usersテーブルです。
nameカラムとnameカラムの読み方のkanaカラムを用意すればいいです。
ajaxとは
下記の記事に解説があります。
テンプレートのコード
まずはテンプレートです。
コードを下記にします。
<style>
.employee-list {
height: 300px;
overflow-y: scroll;
}
</style>
<h4>ユーザーを検索</h4>
<div>
<ul>
<?php foreach (['あ', 'い', 'う', 'え', 'お'] as $kana): ?>
<li>
<a class="page-link" href="#" data-kana="<?= $kana ?>"><?= $kana ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>
<div class="employee-list">
<ul class="list-group" id="employee-list"></ul>
</div>10行目〜15行目の部分はタブになります。
13行目の「data-kana=”<?= $kana ?>”」はクリックしたタブの情報をjQueryに渡す為に記述しています。
19行目のulタグの中にタブをクリックした時のユーザーを表示させます。
次はjQueryです。
jQueryとコントローラー
コードを下記にします。
$('.page-link').on('click', function(e) {
e.preventDefault();
const kanaValue = $(this).data('kana');
$.ajax({
url: '/users/index',
method: 'GET',
data: { kana: kanaValue },
dataType: 'json',
success: function(response) {
const users = response;
const list = $('#employee-list');
users.forEach(user => {
$list.append(`<li class="list-group-item"><a href="#">${user.name}</a></li>`);
});
},
error: function() {
alert('従業員リストの取得に失敗しました');
}
});
});タブはaタグになっています（テンプレートの13行目）がそれをクリックすると画面の読み込みが走ってタブのクリックができなくなるのでそれを防ぐ為に2行目があります。
3行目でテンプレートの「data-kana=”<?= $kana ?>”」の情報を受け取ります。
そしてajaxです、5行目〜23行目に当たります。
6行目は「url: ‘テンプレートを表示しているURL’」を書きます。
7行目は今回はユーザー名を表示するので「GET」にします。
テーブルに情報を保存する場合は「POST」にします。
8行目はコントローラーに渡すデータを書きます。
「{ kana: kanaValue }」は{ key: value }の形で書きます。
ここまでが成功するとコントローラーに8行目の{ kana: kanaValue }が渡されます。
一旦コントローラーのコードを見ます。
public function index()
{
$kana = $this->request->getQuery('kana');
$users = $this->Users->find()->where(['Users.kana LIKE' => $kana . '%'])->toArray();
$this->set(compact('users'));
$this->set('_serialize', 'users');
}3行目の「getQuery(‘kana’)」のkanaはjQueryから渡って来た{ kana: kanaValue }のkanaです。
そして$kanaはkanaValue（クリックしたタブの値）です。
この値を使って5行目でusersテーブルのkanaカラムの値の先頭の文字（たとえばあんどうの「あ」）の中でクリックしたタブの文字と同じ物がないかを探します。
「あ」のタブをクリックしたとするとkanaカラムの値は「あんどう」や「あいかわ」とかが該当します。
そして該当データをjsonにするのが8行目でこれをjQueryに渡してjQueryのコードの10行目からに戻ります。
10行目の「response」にコントローラーから渡された情報（タブの文字に該当するユーザーの情報）が入っています。
そしてその情報を14行目〜16行目を使ってNodeを生成してブラウザに表示します。
15行目の「${ user.name }」は「${ 〜.name }」の形でnameカラムの値を表示します。
18行目〜20行目はajaxに失敗した時の為に書いています。
これで完成です。