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

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
新人エンジニアです。
正しく質問できているかどうかも怪しいレベルですのでお手柔らかにお願いします。
現在、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>

m.ts10806

2020/08/19 03:11

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

tatsuki1805

2020/08/19 03:17

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

yureighost

2020/08/19 03:44

このソースにはmarkerDataに値を渡しているPHPの動作部分があり、回答者側はその部分が必ずエラーになりデータ取得できず確認ができません。 PHPで取得しているのがJSONデータであることはわかるので、例として一部だけでいいのでどういった形式のJSONが渡されるのか提示できますでしょうか。

tatsuki1805

2020/08/19 04:01 編集

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

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

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

javascript
1・・・
2function setMarker(markerData) {
3
4    $("#foo-table").DataTable({
5        lengthChange: false,
6        data: markerData,
7        columns: [
8            { data: 'naviid' },
9            { data: 'name',
10                render:function(data,type,row,meta){
11                    return `<a href="javascript:myclick(${meta.row})">${data}</a>`;
12                }
13            }
14        ]    
15    });
16・・・