jqueryのは、私はこのコードでのDataTableを構築してい

Question

を動作しないで構築された：

var pdatafile ="json/pdata_"+data.cmp+"_"+data.year+"_"+data.gamecode+".json"; 
$.getJSON(pdatafile, function (myJson) { 
    let html = []; 
    var i=0; 
    for(let team in myJson){ 
     let teamName = team; 
     if (i==0){ var classe='<?php echo $tvloc;?>';} 
     if (i==1){ var classe='<?php echo $tvvis;?>';} 
     html.push('<table class="liveboxscore"><thead>'); 
     html.push('<tr><th colspan="19">' + teamName + '</td></tr>'); 
     html.push('<tr><th colspan="2" class="'+classe+'">Player</th><th class="'+classe+'">Minutes</th><th class="'+classe+'">Points</th><th class="'+classe+'">PIR</th><th class="'+classe+'">+/-</th><th class="'+classe+'">TSR</th><th class="'+classe+'">3p</th><th class="'+classe+'">2p</th><th class="'+classe+'">1p</th><th class="'+classe+'">OR</th><th class="'+classe+'">DR</th><th class="'+classe+'">TR</th><th class="'+classe+'">Ass</th><th class="'+classe+'">TO</th><th class="'+classe+'">Bl</th><th class="'+classe+'">Rej</th><th class="'+classe+'">Foul</th><th class="'+classe+'">Drawn</th></tr></thead><tbody>'); 
     for(let player in myJson[team]){ 
      let playerName = player; 
      if (myJson[team][player].threet>0) {threedata=""+myJson[team][player].threed+"/"+myJson[team][player].threet+" ("+myJson[team][player].pct3+")";} 
      else if (myJson[team][player].threet==0) {threedata="";} 
      if (myJson[team][player].twot>0) {twodata=""+myJson[team][player].twod+"/"+myJson[team][player].twot+" ("+myJson[team][player].pct2+")";} 
      else if (myJson[team][player].twot==0) {twodata="";} 
      if (myJson[team][player].onet>0) {onedata=""+myJson[team][player].oned+"/"+myJson[team][player].onet+" ("+myJson[team][player].pct1+")";} 
      else if (myJson[team][player].onet==0) {onedata="";} 
      if (myJson[team][player].oreb==0) {myJson[team][player].oreb="";} 
      if (myJson[team][player].dreb==0) {myJson[team][player].dreb="";} 
      if (myJson[team][player].treb==0) {myJson[team][player].treb="";} 
      if (myJson[team][player].assist==0) {myJson[team][player].assist="";} 
      if (myJson[team][player].turnover==0) {myJson[team][player].turnover="";} 
      if (myJson[team][player].block==0) {myJson[team][player].block="";} 
      if (myJson[team][player].rejected==0) {myJson[team][player].rejected="";} 
      if (myJson[team][player].foul==0) {myJson[team][player].foul="";} 
      if (myJson[team][player].drawn==0) {myJson[team][player].drawn="";} 

      html.push('<tr>'); 
      html.push('<td>' + myJson[team][player].jpdorsal + '</td><td>' + myJson[team][player].pname + '</td><td>' + myJson[team][player].minutes + '</td><td>' + myJson[team][player].points + '</td><td>' + myJson[team][player].pir + '</td><td>' + myJson[team][player].pm + '</td><td>' + myJson[team][player].tsr + '</td><td>' + threedata + '</td><td>' + twodata + '</td><td>' + onedata + '</td><td>' + myJson[team][player].oreb + '</td><td>' + myJson[team][player].dreb + '</td><td>' + myJson[team][player].treb + '</td><td>' + myJson[team][player].assist + '</td><td>' + myJson[team][player].turnover + '</td><td>' + myJson[team][player].block + '</td><td>' + myJson[team][player].rejected + '</td><td>' + myJson[team][player].foul + '</td><td>' + myJson[team][player].drawn + '</td></tr></tbody>'); 
     } 
     if (i==0){ 
      html.push('<tfoot><tr><td colspan="2">TOTAL</td><td></td><td>'+data.locres+'</td><td>'+data.locpir+'</td><td>'+(data.locres-data.visres)+'</td><td>'+data.loctsr+'</td><td>'+data.locthreed+'/'+data.locthreet+'('+data.locpct3+')</td><td>'+data.loctwod+'/'+data.loctwot+'('+data.locpct2+')</td><td>'+data.loconed+'/'+data.loconet+'('+data.locpct1+')</td><td>'+data.locoreb+'</td><td>'+data.locdreb+'</td><td>'+data.loctreb+'</td><td>'+data.locassist+'</td><td>'+data.locturnover+'</td><td>'+data.locblock+'</td><td>'+data.locrejected+'</td><td>'+data.locfoul+'</td><td>'+data.locdrawn+'</td></tr></tfoot>'); 
     } 
     if (i==1){ 
      html.push('<tfoot><tr><td colspan="2">TOTAL</td><td></td><td>'+data.visres+'</td><td>'+data.vispir+'</td><td>'+(data.visres-data.locres)+'</td><td>'+data.vistsr+'</td><td>'+data.visthreed+'/'+data.visthreet+'('+data.vispct3+')</td><td>'+data.vistwod+'/'+data.vistwot+'('+data.vispct2+')</td><td>'+data.visoned+'/'+data.visonet+'('+data.vispct1+')</td><td>'+data.visoreb+'</td><td>'+data.visdreb+'</td><td>'+data.vistreb+'</td><td>'+data.visassist+'</td><td>'+data.visturnover+'</td><td>'+data.visblock+'</td><td>'+data.visrejected+'</td><td>'+data.visfoul+'</td><td>'+data.visdrawn+'</td></tr></tfoot>'); 
     } 
     html.push('</table>'); 
     i=i+1; 
    } 
    document.getElementById('boxscore').innerHTML = html.join(''); 
}); 

は、以前私が仕事に、このために必要なすべてのものを含める：

最後に

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<link rel="stylesheet" type="text/css" ref="css/jquery.dataTables.min.css"/> 
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.max.css" /> 
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="https://cdn.datatables.net/t/bs-3.3.6/dt-1.10.11/datatables.min.js"></script> 
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css"></script> 
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script> 
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css"></script> 
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script> 
<script src="https://cdn.datatables.net/t/bs-3.3.6/dt-1.10.11/datatables.min.css"></script> 
<link rel="stylesheet" type="text/css" href="css/datatables.min.css"/> 
<script type="text/javascript" src="js/livedtsets.js"></script> 

、私のlivedtsets.js

何らかの理由で私は知らないし、狂ってしまいます。これは動作しません。私は、テーブルはそこにありますが、それはDataTableではありません（私は列などを並べ替えることができません）何かjsでdatatableを構築する問題はありますか？

ご協力いただきありがとうございます。

Answer 1

あなたがテーブルをオンザフライ作成しているので：あなたが成功関数の最後ではなく、DOM準備であなたのDataTableを初期化する必要が

$.getJSON(pdatafile, function (myJson) { 

。

変更し、これらの行：

document.getElementById('boxscore').innerHTML = html.join(''); 
}); 

と：

document.getElementById('boxscore').innerHTML = html.join(''); 
    var t = $('.liveboxscore').DataTable({ 
    "bPaginate": false, 
    "bInfo": false, 
    "bFilter": true 
    }); 
}); 

Answer 2

あなたは連続して作成した複数のテーブルを持って、あなたはすべてのテーブルが終了したとき、あなたはあなた自身の「準備」することができます知らない場合

var t, t2; 
var ready = setInterval(function() { 
    if ($('.liveboxscore').length && $('.anotherTable').length) { 
    clearInterval(ready); 
    t = $('.liveboxscore').DataTable({ 
     //... 
    }); 
    t2 = $('.anotherTable').DataTable({ 
     //... 
    }); 
    } 
}, 10) 

単純なintervalは、次のようにチェックします。テーブル要素が存在します。 $('.liveboxscore').lengthに値がある場合はDOMに存在します。すべての要素がDOMに存在すると、区間は終了し、DataTable()を実行します。 $(document).ready({...})の代わりにlivedtsets.jsに入れてください。