Q&A
PHP の $sql 文が閉じてない。
concat(lastname, firstname) as name とかで取得してまとめる。
$stmt->execute() で、パラメータを渡さないなら
$dbh->query()でよいのでは？よけいな while で全行取得が無駄。
余計なライブラリ使わないで素のJavaScript でも簡単そう。
DataTablesに関するjavascriptのコーディングの仕方になると思いますが、
恐れ入りますが、解決方法がわかるようでしたら、ご教示頂けますと助かります。
前提・実現したいこと
・PHP、Javascript(ajax,datatables)、MYSQLを使って検索サイトを構築しています。
発生している問題・エラーメッセージ
■やりたいこと
・AJAX通信でJSONデータを取得しDataTablesのデータにJSONを指定して表を表示させており、
その表の中の各行の氏名列にリンクを付与して、そのリンクを押すと別のリンク先へ遷移させる。
・氏名列のリンク名(a要素)はDBから取得したJSONデータをそのまま付与したい。
■発生している問題
・氏名列のリンク名(a要素)をDBから取得したJSONデータにする方法がわからず、
今は固定文字列(氏名)しか設定できずに困っています。
・画像でいくと、氏名列が全て氏名となっており、そこにハイパーリンクが付与されています。
ハイパーリンク付与方法は以下を参考にさせて頂きました。
https://teratail.com/questions/160646
・ソースコードでいくと、JSファイルのfunction ( data, type, row,)のreturn部分のa要素が該当箇所です。
・今は<a>氏名</a>と書いていますが、ここをJSONデータ(data:lastname or row(lastname))を付与したいです。
該当のソースコード
js
1//画面表示に読み込まれる 2$(document).ready(function() { 3 $.extend( $.fn.dataTable.defaults, { 4 language: { 5 url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json" 6 } 7 }); 8 $('#sample).dataTable ({ 9 lengthMenu: [ 100, 200, 300, 400, 500 ], 10 // 件数のデフォルトの値を50にする 11 displayLength: 100, 12 dom: '<"top"fil>rt<"bottom"p><"clear">', 13 order: [ [ 1, "desc" ],[ 4, "asc" ] ], 14 "ajax" : { 15 "url": "ajax_show_activeonly.php", 16 "datatype": "json", //受け取りデータの種類 17 "dataSrc": "" 18 }, 19 "columnDefs":[ 20 {targets:0,title:'氏名',data:'lastname' ,render: 21 function ( data, type, row,) { 22 console.log(row); 23 return '<a href="'+row.id+'.php"> 氏名 </a>'; 24 }}, 25 {targets:1,title:'学年',data:'grade'}, 26 {targets:2,title:'年齢',data:'age'}, 27 {targets:3,title:'身長',data:'height'}, 28 29～省略～
php
1// データベース接続クラスPDOのインスタンス$dbhを作成する 2try { 3 $dbh = new PDO("mysql:host={$host};dbname={$dbname};charset=utf8mb4", $dbuser, $dbpass); 4// PDOExceptionクラスのインスタンス$eからエラーメッセージを取得 5} catch (PDOException $e) { 6 // 接続できなかったらvar_dumpの後に処理を終了する 7 var_dump($e->getMessage()); 8 exit; 9} 10 11// データ取得用SQL 12// 値はバインドさせる 13 $sql = 'SELECT 14 id, 15 concat(lastname, firstname) as name, 16 grade, 17 TIMESTAMPDIFF(YEAR, `birthday`, CURDATE()) AS age, 18 height 19from man_tbl'; 20 21// SQLを実行 22$stmt = $dbh->query($sql); 23 24// あらかじめ配列$productListを作成する 25// 受け取ったデータを配列に代入する 26// 最終的にhtmlへ渡される 27$data = array(); 28 29// fetchメソッドでSQLの結果を取得 30// 定数をPDO::FETCH_ASSOC:に指定すると連想配列で結果を取得できる 31// 取得したデータを$productListへ代入する 32while($row = $stmt->fetch(PDO::FETCH_ASSOC)){ 33 $data[] = array( 34 'id' => $row['id'], 35 'name' => $row['name'], 36 'grade' => $row['grade'], 37 'age' => $row['age'], 38 'height' => $row['height'], 39 ); 40} 41 42// ヘッダーを指定することによりjsonの動作を安定させる 43 header('Content-type: application/json'); 44// htmlへ渡す配列$productListをjsonに変換する 45 echo json_encode($data,JSON_UNESCAPED_UNICODE); 46
HTML
1<!doctype html> 2<html lang="ja"> 3 <head> 4 ～省略～ 5 </head> 6<body> 7 <table id="sample" class="table table-bordered table-hover table-responsive table-sm"> 8 9 <thead> 10 <tr class="table-primary"> 11 <th>氏名</th> 12 <th>学年</th> 13 <th>年齢</th> 14 <th>身長</th> 15 </tr> 16 </thead> 17 18</table> 19 20～省略～ 21 22<script src="ajax_table.js"></script>
ご指摘ありがとうございます。修正させて頂きました。
>PHP の $sql 文が閉じてない。
→申し訳ありません、こちらに転記する際に漏れておりました。
>concat(lastname, firstname) as name とかで取得してまとめる。
→SQLでconcatする方向で修正しました。
性能考えても、DBでconcatした方がよいですね。
>$stmt->execute() で、パラメータを渡さないなら
>$dbh->query()でよいのでは？よけいな while で全行取得が無駄。
→勉強になります。
PHP初心者で、SQL実行方法の違いなどを把握できていませんでした。
今後は必要に応じて、使い分けしていきたいと思います。
試してないけれど1行で済むのでは？
echo json_encode($dbh->query($sql, PDO::FETCH_ASSOC));
回答2件
0
試してないけれど？
後は、select で表示範囲を指定するだけ？
HTML
1<table id="sample" class="table table-bordered table-hover table-responsive table-sm"> 2 <thead> 3 <tr class="table-primary"> 4 <th>氏名 <th>学年 <th>年齢 <th>身長 5 6 <tbody> 7 <tr> 8 <td><a href=""><output name="name"></output></a> 9 <td><output name="grade"></output> 10 <td><output name="age"></output> 11 <td><output name="height"></output> 12 </tbody> 13</table>
javascript
1function hoge () { 2 fetch ('http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json') 3 .then (res => res.json ()) 4 .then (fuga); 5} 6 7 8function fuga (ary) { 9 let 10 [table, first, ...other] = document.querySelectorAll ('#sample, #sample tbody'), 11 newTbody = table.appendChild (document.createElement ('tbody')), 12 tr = first.querySelector ('tr'); 13 14 other.forEach (e => e.remove ());//tbdoy 削除 15 ary.forEach (row => { 16 let 17 tr_ = newTbody.appendChild (tr.cloneNode (true)), 18 [a, ...output] = tr_.querySelectorAll ('a, output'); 19 20 Array.from (output, e => e.value = row[e.name] || ''); 21 a.href=row.id + '.php'; 22 }); 23} 24
まずは謝らないと。css が抜けていた。
表の tbody は複数置ける。最初の tbody は、雛形にするので隠しておく
css
1#sample tbody:first-of-type { display: none; }
あとは解説。
Javascript
1 let 2 //基準となるテーブル,そのテーブルの子要素である tbody を取得する 3 //tbody は、複数ある可能性があり、なおかつ最初の tbody は雛形にするので 4 //区別して取得する 5 [table, first, ...other] = document.querySelectorAll ('#sample, #sample tbody'), 6 7 //新たに追加する tbody を作っておく 8 newTbody = table.appendChild (document.createElement ('tbody')), 9 10 //雛形となる tbody の最初の tr 要素を取得する。(tr 自身も雛形にする) 11 //のちにこの子要素に含まれる output 要素を取得しやすいようにするため 12 tr = first.querySelector ('tr'); 13 14 //最初の tbody 要素以外があれば削除する（一度しか行われないのであれば不要） 15 other.forEach (e => e.remove ());//tbdoy 削除 16 17 //配列（JSONデータ）から行部分を作る 18 ary.forEach (row => { //row は1行分のデータ 19 let 20 //雛形の tr 要素のクローンを作って（子要素もすべて含む）新たに作った tbody に追加する 21 tr_ = newTbody.appendChild (tr.cloneNode (true)), 22 23 //雛形(tr)にある要素(a, output)を取り出す 24 //別々に取得するのが面倒なので一度に取得する。 25 //(順番は a要素が最初というのが保証されていそうだから） 26 [a, ...output] = tr_.querySelectorAll ('a, output'); 27 28 //output 要素の名前と同じ row オブジェクトから値を取り出し output 要素の値とする 29 // 最後の || '' は、 row[e.name] がゼロまたは、null の時には空文字にする 30 Array.from (output, e => e.value = row[e.name] || ''); 31 //outoput は配列なのだから以下でもよかった。コード文字数がちょっと減る 32 //output.forEach (e => e.value = row[e.name] || ''); 33 34 //アンカー要素は特別なので、href 属性に値を代入する 35 a.href=row.id + '.php'; 36 });
おわかりいただけただろうか。
投稿2019/05/05 01:19
編集2019/05/11 11:03退会済みユーザー
総合スコア0
ご回答ありがとうございます。回答内容を確認させて頂きます。
最近サイト構築のために始めたところなので、コードがすぐに理解できなかったのですが、勉強してみます。
すみません、function fugaの中でやっていることが理解できませんでした。
ご回答いただいてる状況で恐縮ですが、ご解説頂くか、もしくは、新たなご回答を頂けないでしょうか。
丁寧な解説ありがとうございました。解説読ませていただき、ある程度理解すること出来ました。このコードを取り入れるためには私自身の知識がまだ足りないように思いますので、今後使えるように勉強していきます。
0
ベストアンサー
データ取得して返す所まではできているようなので、
JavaScript
1return '<a href="'+row.id+'.php"> 氏名 </a>';
となっている部分を、
JavaScript
1return '<a href="'+row.id+'.php"> '+row.name+' </a>';
とすれば良いのではないでしょうか。
console.log(row); の中身に出力したいものが出ているのであれば、あとはJavaScript側だけで解決できます。
他のアプローチとしては
PHP側でaタグを含めて文字列全て作ってしまって返せば、JavaScript側の文字列加工は不要になります。
ただ、文字列を加工したりする部分は一箇所にまとめたほうが良いのかなとは思います。
(SQLで作るのか、PHPで文字列加工するのか、JavaScriptで文字列加工するのか、など)
投稿2019/05/11 11:02
総合スコア3257
ご回答ありがとうございました。ご回答の内容でやりたいことが実装出来ました。
他のアプローチに関するコメントについても、保守性などをあげるために統一感だせるように是正していきたいと思います。
あなたの回答
tips
プレビュー
