數據表使用jQuery不工作

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如下：

$(document).ready(function(){ 
    var t = $('.liveboxscore').DataTable({ 
    "bPaginate": false, 
    "bInfo": false, 
    "bFilter": true 
    }); 
}); 

由於某種原因，我不知道，我要瘋了，這是行不通的。我的意思是，該表在那裏，但它不是一個DataTable（我不能排序列等）是否有什麼問題與我一樣用js構建數據表？

非常感謝您的熱心幫助。

Answer 1

因爲你正在創建與飛行表：

$.getJSON(pdatafile, function (myJson) { 

你需要在成功函數的末尾來初始化數據表中，而不是在DOM已準備就緒。

更改這些行：

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()。把它放在你的livedtsets.js而不是$(document).ready({...})。