jquery - 使用 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>

最后，我的livetsets.js如下:

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

出于某种我不知道的原因，我快要疯了，这不起作用。我的意思是，表格在那里，但它不是数据表(我无法对列进行排序等)。像我一样用js构建数据表有什么问题吗？

非常感谢您的帮助。

Answer 1

如果您连续创建了多个表，并且您不知道所有表何时完成，您可以像这样创建自己的“就绪”构造:

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({...}) 中。