Datatable built with jquery not working

Question

I am building a Datatable with this code:

 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('');
});

Previously I include all the necessary stuff for this to work:

<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>

Finally, my livedtsets.js is as follows:

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

For some reason I don't know and I am going crazy, this is not working. I mean, the table is there, but it is not a DataTable (I cannot sort the columns, etc.) Is there any problem building the datatable with js as I do?

Many thanks for your kind help.

Answer 1

If you have multiple tables created consecutively, and you dont know when all tables is finished, you can make your own "ready" construct like this :

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

It is a simple interval that checks if the table elements exists. If $('.liveboxscore').length has a value it exists in DOM. When all elements is present in DOM the interval finishes and execute DataTable(). Place it in your livedtsets.js instead of the $(document).ready({...}).

Answer 2

Because you are creating on the fly the table with:

$.getJSON(pdatafile, function (myJson) {

you need to initialize your datatable at the end of the success function and not at dom ready.

Change these lines:

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

with:

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