質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1644閲覧

jQueryプラグインのDataTablesにJSONデータ表示でリンク(複数パラメータあり)を追加したい

susumu_0414

総合スコア37

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/11/27 09:31

編集2018/11/28 00:25

環境:XAMPP(v3.2.2)PHP,smarty,jquery(jquery-3.3.1.js),DataTables(1.10.18)

AJAX通信でJSONデータを取得しDataTablesのデータにJSONを指定して表を表示させています。
各行の最終列にリンクを表示し、各行のリンクを押すと押された行の品番と品名をパラメータに持たせて、リンク先に送信したいのですが、やり方がわかりません。
下記のコードで最終列にリンクの追加までは実現できているのですが、
その行の値を取得して、パラメータに持たせてやるところが実現できていません。
すいませんが、解決方法をよろしくお願いいたします。

PHP

1<?php 2 3require_once($_SERVER['DOCUMENT_ROOT'].'/Web/system.php'); // 定数定義ファイルの読み込み 4require_once(COM_DIR.'/function.php'); 5 6// ページ表示初期共通処理 7Sub_Form_Ini(basename(__FILE__),__FALSE__,$smarty); 8 9//パラメータ取得 10$objParam = new frm0030_param(); 11 12//PDOデータベースオブジェクト生成 13$dbo = new db_cls("xxxdb"); 14 15//変数初期化 16$result = NULL; 17 18//クエリー生成 19$strSQL = SetSQL($objParam); 20//クエリー実行 21$dbo->Db_SelectAll($strSQL,$result); 22 23// 結果をjson形式で返す 24header('Content-Type: application/json'); 25echo json_encode($result); 26 27//関数:SetSQL($objParam) 28//引数:$objParam⇒ページ間パラメータ 29Function SetSQL($objParam){ 30 31 $strSQL = ""; 32 33 $strSQL = $strSQL . "SELECT"; 34 $strSQL = $strSQL . " X.zhin_cd,"; 35 $strSQL = $strSQL . " MH.hin_nm,"; 36 $strSQL = $strSQL . " MH.hin_kbn,"; 37 $strSQL = $strSQL . " MS.now_stock,"; 38 $strSQL = $strSQL . " MS.now_stock_order,"; 39 $strSQL = $strSQL . " MS.order_su,"; 40 $strSQL = $strSQL . " MS.now_ztanka,"; 41 $strSQL = $strSQL . " MH.tanka,"; 42 (SQLは長文のため省略) 43 return $strSQL; 44} 45?> 46

html

1 <div id="main"> 2 <div id="page_title"> 3 <h2>{$smarty.session.frm0000_param->page_nm}</h2> 4 </div> 5 <div id="contents_search"> 6 <h3>検索条件入力</h3> 7 <form id="form_input" method = "post" name = "form_input"> 8 <table id="tbl_search"> 9 <tr> 10 <td>取得件数:</td> 11 <td> 12 <input class = "num_9" type="number" name="data_cnt">(売上金額上位からの取得件数を指定) 13 </td> 14 </tr> 15 <tr> 16 <td>売上合計金額:</td> 17 <td> 18 <input class = "num_9" type="number" name="sum_kingaku">円以上 19 </td> 20 </tr> 21 <tr> 22 <td>売上数量:</td> 23 <td> 24 <input class = "num_9" type="number" name="sum_suryo">個以上 25 </td> 26 </tr> 27 <tr> 28 <td>品番:</td> 29 <td> 30 <input type="text" class="txt_width_130" name="hin_cd">(含む) 31 </td> 32 </tr> 33 </table> 34 <input type="hidden" name="btn_nm"> 35 <a class="square_btn" href="" id="btn_search" >検索</a> 36 </form> 37 </div> 38 <div id="contents_result"> 39 <h3>検索結果</h3> 40 {*$results|@var_dump*} 41 <table id="tbl_result" class="stripe compact cell-border"> 42 <thead> 43 </thead> 44 <tbody> 45 </tbody> 46 </table> 47 </div> 48 </div>

JavaScript

1$(document).ready(function(){ 2 $("#btn_search").click(function(){ 3 4 // 操作対象のフォーム要素を取得 5 form_input.btn_nm.value='btn_search'; //押したボタン識別用にボタン名をセット 6 var $formData = $("#form_input").serialize(); //formのデータを取得 7 console.log($formData); 8 // Ajax通信を開始する 9 $.ajax({ 10 url: "frm0030_jdata.php", 11 type: "POST", // getかpostを指定(デフォルトは前者) 12 dataType: 'json', // 「json」を指定するとresponseがJSONとしてパースされたオブジェクトになる 13 data: $formData, 14 }) 15 // ・ステータスコードは正常で、dataTypeで定義したようにパース出来たとき 16 .done(function (response) { 17 console.log("成功です!"); 18 console.log(response); 19 Fnc_DataTables_Set(response); 20 }) 21 // ・サーバからステータスコード400以上が返ってきたとき 22 // ・ステータスコードは正常だが、dataTypeで定義したようにパース出来なかったとき 23 // ・通信に失敗したとき 24 .fail(function () { 25 console.log("失敗"); 26 $('#result').val('失敗'); 27 $('#detail').val(''); 28 }); 29 return false; 30 }); 31}); 32 33window.onload = function() { 34 Fnc_DataTables_Set(); 35}; 36 37function Fnc_DataTables_Set($response){ 38 $("#tbl_result").DataTable({ 39 destroy: true, 40 order: [[9,"desc"]], 41 select: { 42 style: 'single' 43 }, 44 scrollX: true, 45 // 縦スクロールバーを有効にする (scrollYは200, "200px"など「最大の高さ」を指定します) 46 scrollY: 600, 47 pageLength: 25,//初期表示件数 48 lengthMenu: [[25, 50, 100,-1], [25, 50, 100, "全件"]],//表示件数メニュー 49 dom: 'Blfrtip', 50 buttons: ['copy', 'excel'], 51 fixedColumns: { 52 leftColumns: 2 53 }, 54 columnDefs:[ 55 {targets:0,title:'在庫品番',data:'zhin_cd'}, 56 {targets:1,title:'品名',data:'hin_nm'}, 57 {targets:2,title:'品区分',data:'hin_kbn'}, 58 {targets:3,title:'現在庫数',data:'now_stock'}, 59 {targets:4,title:'現在発注残数',data:'now_stock_order'}, 60 {targets:5,title:'現在受注残数',data:'order_su'}, 61 {targets:6,title:'現在庫単価',data:'now_ztanka'}, 62 {targets:7,title:'現在定価',data:'tanka'}, 63 {targets:8,title:'グラフ',data:'zhin_cd',render: 64 function ( data, type, full, meta ) { 65 return '<a href="リンク先.php?hin_cd=「ここに品番」&hin_nm=「ここに品名」" target="_blank">グラフ</a>'; 66 } 67 }, 68 ], 69 data: $response, 70 }); 71}; 72

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/11/27 11:28

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。
m.ts10806

2018/11/27 11:30

利用しているjQueryのバージョン、動作確認しているブラウザを追記してください。また、PHPを実行されていますが、再現確認するためにはそのPHPのコードかAjaxが返すレスポンスデータのサンプルがあったほうが良いです。htmlが全く提示されていませんが、念のため、必要最低限で結構ですのでご提示いただければと思います。
guest

回答1

0

ベストアンサー

ajaxからとれるresponseがどういう形式なのかわかりかねますが・・・

最終行でパラメータ付きのリンクを作っていると思うのでそれでいいんじゃないですか?
そのままで遷移しませんか?

遷移先でgetPostでパラメータとればいいんじゃないかと思うんですが。。
見当違いだったらすいません。

投稿2018/11/28 01:27

ms5025

総合スコア292

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

susumu_0414

2018/11/28 01:44

回答ありがとうございます。 最終行でリンクを作っている処理で、「ここに品番」「ここに品名」と記載している部分の品番と品名の取り方がわからないのです。
ms5025

2018/11/28 02:42

{targets:8,title:'グラフ',data:'zhin_cd',render: function ( data, type, row ) { console.log(row); //return '<a href="リンク先.php?hin_cd=「ここに品番」&hin_nm=「ここに品名」" target="_blank">グラフ</a>'; } }, コンソールの部分で rowのDOMとかとれないですか? function ( data, type, full, meta ) の引数をコンソールで吐き出して使えるものを見るとか? 正直JqueryのDataTableってあまり実務では使わないので見当違いだったらすいません。 smartyなら普通にtable書いて、data属性使ったりすることが多くて…
susumu_0414

2018/11/28 04:02

実務ではあまり使わないのですね!貴重な意見ありがとうございます。 ページングやソート機能、列固定など簡単に実装できいいなぁっと思っていたのですが、 やりたいことが増えてくると徐々にやり方がわからないことが多くなってきて、 この先どうしようか迷っていたところです。
ms5025

2018/11/28 04:39

すいません、あくまで私が今まで経験した現場では、ということで、 他の方でガシガシ利用されてる方もいるかもしれません おっしゃるとおり、色々やりたいことや変更点が増えてきます。 画面デザインは客先の要件等でころころ変わるし、特にcssはデザイナーさんがされることも多いです 画面ごとに細かなテコ入れ、より複雑なデザイン、仕様、要件を満たす動きとなると 普通のtabaleで思い描く通りに作っていく方が逆に可読性もよく、やりやすかったりします。 というのは私の個人的な意見なのですが・・ お役にたてず申し訳ありません。 function ( data, type, full, meta ) あたりで使えそうなものがあると思います。
susumu_0414

2018/11/28 05:48

ありがとうございます。独学でひとりで開発しているため、ほかのプロジェクトでどのように開発されているのか非常に気になります。 下記のように引数「row」を使用することで対象のデータが取れました。 ありがとうございます。 columnDefs:[ {targets:0,title:'G',data:null,render: function ( data, type, row, full, meta ) { return '<a href="cht0010_res.php?hin_cd='+row.zhin_cd+'&uri_yyyy='+row.uri_yyyy+'">グラフ</a>'; } }, {targets:1,title:'在庫品番',data:'zhin_cd'}, {targets:2,title:'品名',data:'hin_nm'},     以下省略
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問