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

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

ただいまの
回答率

87.49%

jQueryのDataTableが機能しないです。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 679

score 4

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
新人エンジニアです。
正しく質問できているかどうかも怪しいレベルですのでお手柔らかにお願いします。
現在、jQueryのDataTableを使用してサイドメニューを作成しています。
ですが<tbody>に挿入した<a href="${markerData[i]['url']}">${markerData[i]['name']}</a>`+'<br><br>'+markerData[i]['holecount']+"H"+markerData[i]['greencount']+"G"+"<br><br>"+"カート:"+markerData[i]['ipad_sum']+"台"がサイドメニューに表示されるのですが、DataTableに認識されず、ソートや検索機能が使用できません。 おそらくHTMLの<tbody>に直接<tr><td></td><td></td></tr>を入力すると、DataTableが機能するのですが、document.getElementById('saku').innerHtml=<tr><td></td><td></td></tr>で挿入すると、DataTableが機能せず、認識しません。 どのようにすればDataTableが<tbody>の子要素を認識するんですが賢い方回答お願い致します。

該当のソースコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="navimap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/> 
</head>
<body>
         <div id="header"></div>
         <table cellpadding="0px">
           <tr>
             <td width="30%" style="margin-top:2px;">
              <div id="sidebar">

                <div id="golf">
                <table style="width:100%;heigth:100%;" id="foo-table">
                <thead>
                <tr><th>CD</th><th>name</th></tr>
                </thead>
                <tbody id="saku" class="saku1">


                </tbody>
                </table>
                </div>  



              </div>
            </td>  
             <td width="70%" ><div id="map"></div></td>
           </tr>
         </table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>   
<script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>  
<script>
   var target = document.getElementById('map'); 
   var centerp = {lat: 36.414426 , lng: 139.049106};

  function initMap() {
    map = new google.maps.Map(target, {
      center: centerp,
      zoom: 5.7,
    });

  }
  var markerD = [];

// DB情報の取得(ajax通信)

// windowオブジェクト(windowオブジェクトの主要なオブジェクトはdocumentオブジェクト,locationオブジェクト),addEventListener()『対象要素.addEventListener(種類、関数、false)』,『イベントを実行することができるメソッド』、DOMContentLoaded『webページを読み込みが完了し時に発動』
window.addEventListener('DOMContentLoaded', function(){
  $.ajax({
    type: "POST",
    url: "DB.php",
    dataType: "json",
    success: function(data){
      markerD=data;
      setMarker(markerD);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown){
      alert('Error : ' + errorThrown);
    }
  });
});








var map;
var marker = [];
var infoWindow=[];

function setMarker(markerData) {


      // console.log(markerData.length);
      // 配列(markerData)をgolfid順に並び替える。
      const copymarkerData=markerData.sort((a,b) => a.golfid - b.golfid);






      var icon;
      var sidebar_html= " ";
      var url="";

      for (var i = 0; i < markerData.length; i++) {

            var latNum = parseFloat(markerData[i]['lat']);
            var lngNum = parseFloat(markerData[i]['lon']);

            // マーカーの位置セット
            var markerLatLng= new google.maps.LatLng({
              lat:latNum,
              lng:lngNum
            });

            // google.maps.Markerクラスのオブジェクト(marker[i])を作成かつマップ上にマーカーを作成。
            marker[i] = new google.maps.Marker({
                        position:markerLatLng,        // マーカーを立てる位置を指定
                        map: map,                        // マーカーを立てる地図を指定
                        icon: icon                       // アイコン指定
               });

            // google.maps.InfoWindowクラスのオブジェクト(infoWindow[i])を作成。
            infoWindow[i] = new google.maps.InfoWindow({
            content:`<a href="${markerData[i]['url']}">${markerData[i]['name']}</a>`+'<br><br>'+markerData[i]['holecount']+"H"+markerData[i]['greencount']+"G"+"<br><br>"+"カート:"+markerData[i]['ipad_sum']+"台"
          });


            // for文の中にvar sidebar_html=""があると毎回初期化される;


            sidebar_html +="<tr>"+"<td>"+markerData[i]['naviid']+"</td>"+"<td>"+'<a href="javascript:myclick(' + i + ')">' + markerData[i]['name'] +"<\/a>"+"</td>"+"</tr>";

            markerEvent(i);




      };


      document.getElementById("saku").innerHTML = sidebar_html;


}  ; 

console.log(document.getElementsByClassName("saku1"));
var openWindow;
// マーカーをクリックした際の関数
function markerEvent(i) {
        marker[i].addListener('click', function() {
          myclick(i);
        });
      }
// addlistenerメソッドはコールバック関数を指定する。 
// サイドメニューをクリックした際の関数
function myclick(i) {
        if(openWindow){
          openWindow.close();
        }
        infoWindow[i].open(map, marker[i]);
        openWindow = infoWindow[i];
      }
// Jqueryのデータテーブル
jQuery(function($){

$.extend( $.fn.dataTable.defaults, { 
    language: {
        url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
    } 
}); 
$("#foo-table").DataTable({
    lengthChange:false,
});

})      
// '<a href="javascript:myclick('+i+')"> 'はaタグをクリックした場合、myclick関数が実行される。     

</script> 



</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2020/08/19 12:11

    ><急募>

    お急ぎでしたらクラウドワークスなどで作業依頼してください。「新人エンジニア」という語句で何を伝えたいのかわかりませんが、もし業務でしたらこの質問書いてる時間がもったいない。

    キャンセル

  • tatsuki1805

    2020/08/19 12:17

    お急ぎではございません。
    研修課題としてwebサイトを作成しています。

    キャンセル

  • yureighost

    2020/08/19 12:44

    このソースにはmarkerDataに値を渡しているPHPの動作部分があり、
    回答者側はその部分が必ずエラーになりデータ取得できず確認ができません。

    PHPで取得しているのがJSONデータであることはわかるので、
    例として一部だけでいいのでどういった形式のJSONが渡されるのか提示できますでしょうか。

    キャンセル

  • tatsuki1805

    2020/08/19 13:01 編集

    ご回答ありがとうございます。
    以下のようなデータでございます。
    {"golfid":"198","naviid":"IC01","name":"テスト","url":"https://teratail.com/questions/285738",},

    キャンセル

回答 1

checkベストアンサー

0

DataTableに要素として認識させるには

$(セレクタ).DataTable({});


ここからデータを設定する必要があります。

sidebar_html +=
辺りでやりたかったと思われる。
CDにnaviid、nameにnameの情報を表示し、
nameにjsonのindexのリンクを貼る処理は
setMarker関数内で

・・・
function setMarker(markerData) {

    $("#foo-table").DataTable({
        lengthChange: false,
        data: markerData,
        columns: [
            { data: 'naviid' },
            { data: 'name',
                render:function(data,type,row,meta){
                    return `<a href="javascript:myclick(${meta.row})">${data}</a>`;
                }
            }
        ]    
    });
・・・


こんな感じで記述すれば上手く行きますしDataTableの機能もこれで利用できます。

またこちらに記述する場合は下の
$("#foo-table").DataTable({});
の記述は削除してください。
複数あるとエラーになります。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/08/19 16:51

    ありがとうございます。
    データがDataTableで認識しました。
    なるほど、DataTableを使用するにあたって使用するjsonデータなどをDatatableに読み込ませないといけないんですね。

    キャンセル

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

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る