この記事にはミスがあります。
正しい動作はこちら↓を参考にしてください。
もくじ
テーブルの準備
記事タイトルにLaravelと入れていますがLaravelは関係なくできます。
この続きからはじめます。
前の記事まではIDをインデックス番号で取得していましたが、今後は配列にIDの項目を付与しておきます。
$data = [
[
'ID' => 0001,
'name' => 'Wada',
'sex' => 'Male',
'age' => 35,
],
[
'ID' => 0002,
'name' => 'Sugiyama',
'sex' => 'Male',
'age' => 20,
],
[
'ID' => 0003,
'name' => 'Fukui',
'sex' => 'Female',
'age' => 49,
],
[
'ID' => 0004,
'name' => 'Ono',
'sex' => 'Female',
'age' => 33,
],
];
<table id="example" class="table table-hover">
<thead>
<tr>
<th scope="col">no</th>
<th scope="col">name</th>
<th scope="col">sex</th>
<th scope="col">age</th>
</tr>
</thead>
</table>
（略）
<script>
$(document).ready(function() {
var json = @json($data)
$('#example').DataTable({
data: json,
columns: [
{ data : 'ID' },
{ data : 'name' },
{ data : 'sex' },
{ data : 'age' },
],
});
</script>
ただ表示するだけならこれで問題ありません。
ここから、行をクリックするとそれに応じた内容を表示させます。
以下は参考にしないで！
次項からは実は失敗してしまうコードです。
失敗例として眺める程度にみてくだだい。
失敗に気付いて書き直しをし、動作確認もしました。修正した内容で記事を書き直しましたので、↓こちらをご参考ください。
クリック時にイベントを追加
上で記述したJavaScript部分に追記します。
<script>
$(document).ready(function() {
const json = @json($data)
$('#example').DataTable({
data: json,
columns: [
{data: 'ID'},
{data: 'name'},
{data: 'sex'},
{data: 'age'},
]
});
// 追加ここから
$('tbody tr').click(function(){
const index = $(this).index()
const data = json[index]
const dataIndex = data['ID']
const modalID = "#exampleModal" + dataIndex
$(modalID).modal()
})
// 追加ここまで
});
</script>
詳しく説明するよ。
// ↓ 行をクリックしたとき
$('tbody tr').click(function(){
// ↓ クリックした行番号を取得し代入
const index = $(this).index()
// ↓ jsonのインデックス番号に行番号を指定して、行に応じたjsonのオブジェクトを取得し代入
const data = json[index]
// ↓ 取得したオブジェクトの変数名（ID）を取得し代入
const dataIndex = data['ID']
// ↓ foreachでまわしたときのmodalを取得するためのIDを指定
// ↓ 「#」を忘れずに！
const modalID = "#exampleModal" + dataIndex
// ↓ 上記で指定したIDのモーダルを表示
$(modalID).modal()
})
ここでポイントなのが、モーダルのIDを渡すときに「#」をテキストで代入しておくことです。次項で説明するモーダルで必要になってきます。
const modalID = "#exampleModal" + dataIndex // ←ここ！
モーダルを追加
行に応じた中身を表示させる必要があるので、モーダル用のタグにid属性を持たせます。このidがJavaScriptで渡したmodalIDと一致させることで、行に応じた中身が表示されます。
以下のコードをbladeに追記してください。
@foreach ($data as $key => $value)
<div class="modal fade" id="exampleModal{{ $value['ID'] }}" tabindex="-1" aria-labelledby="exampleModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>名前は{{ $value['name'] }}です。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
<button type="button" class="btn btn-primary">変更を保存</button>
</div><!-- /.modal-footer -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@endforeach
foreachで回しているのでインデックス番号を利用します。
exampleModalと{{ $value['ID'] }}を合体させることで一意なIDとなります。
@foreach ($data as $key => $value)
<div class="modal fade" id="exampleModal{{ $value['ID'] }}"
（略）
セレクタの指定方法が、idの場合#id名となるので、モーダルのIDを代入した際に「#」を忘れずに記述する必要があったのです。
↓こちらのセレクタの項目にて簡単に説明しています。
確認
Wadaさんの行をクリックします。
Fukuiさんの行をクリックします。
ちゃんと選択した行を認識して中身が変更されました！！
※上記は失敗例です※
↓書き直した記事がありますので、こちらをご参考ください。
参考URL
jQueryプラグインのDatatablesにボタンやイベントを追加しようとしたらドツボにはまった件について - Qiita
