DataTablesがデータを認識しない

Question

DataTableにデータを挿入しようとしています。

のDataTable：

<table id="ladder" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>Place</th> 
      <th>Team Name</th> 
      <th>W - L</th> 
      <th>Strk</th> 
      <th>Exp</th> 
      <th>Level</th> 
     </tr> 
    </thead> 
    <tbody id="ladder_stats"> 

    </tbody> 
</table> 

はJQuery：

function fillLadder(place, name, w, l, strk, exp, lvl, id, ladder) { 

    $('<tr><td>' + place + '</td><td><a href="/team?id=' + id + '&l=' + ladder + '">' + name + '</a></td><td>' + w + ' - ' + l + '</td><td>' + strk + '</td><td>' + exp + '</td><td>' + lvl + '</td></tr>').appendTo('#ladder_stats'); 
} 

function refreshLadder() { 

    var ladder = $.urlParam('l'); 

    $.ajax({ 

    url: '/data/ladder_stats.php', 
     data: {l: ladder}, 
     dataType: 'json', 
     type: 'post', 
     success: function(json) { 

      console.log(json); 

      for (i = 0; i < Object.keys(json).length; i++) { 
       fillLadder(json[i].place, json[i].name, json[i].wins, json[i].losses, json[i].strk, json[i].exp, json[i].level, json[i].id, ladder); 
      } 

     }, 
     error: function(ts) { 
      console.log("Error: " + ts.responseText); 
     } 
    }); 
} 


$(document).ready(function() { 

    refreshLadder(); 
    $('#ladder').DataTable(); 
    $('#match_finder').DataTable(); 
}); 

あなたがコードから見ることができるように、私はテーブルにデータを挿入してい

私は、次のコードを持っていますDataTable()機能をロードする前に。残念ながら、DataTablesはデータを認識しません。

Answer 1

は、コードに基づいて、私はそれがタイミングによるものであると信じています。あなたのajaxコールには時間がかかるかもしれません。このようなものに更新されました。

function fillLadder(place, name, w, l, strk, exp, lvl, id, ladder) { 

    $('<tr><td>' + place + '</td><td><a href="/team?id=' + id + '&l=' + ladder + '">' + name + '</a></td><td>' + w + ' - ' + l + '</td><td>' + strk + '</td><td>' + exp + '</td><td>' + lvl + '</td></tr>').appendTo('#ladder_stats'); 
} 

function refreshLadder() { 

    var ladder = $.urlParam('l'); 

    $.ajax({ 

    url: '/data/ladder_stats.php', 
     data: {l: ladder}, 
     dataType: 'json', 
     type: 'post', 
     success: function(json) { 

      console.log(json); 

      for (i = 0; i < Object.keys(json).length; i++) { 
       fillLadder(json[i].place, json[i].name, json[i].wins, json[i].losses, json[i].strk, json[i].exp, json[i].level, json[i].id, ladder); 
      } 

      //Rows created, now we can make tables 
      $('#ladder').DataTable(); 
      $('#match_finder').DataTable(); 

     }, 
     error: function(ts) { 
      console.log("Error: " + ts.responseText); 
     } 
    }); 
} 


$(document).ready(function() { 

    refreshLadder(); 
}); 

Answer 2

あなたはこのようにしてみてくださいことができます：それ

function refreshLadder() { 

    var ladder = $.urlParam('l'); 

    $.ajax({ 

    url: '/data/ladder_stats.php', 
     data: {l: ladder}, 
     dataType: 'json', 
     type: 'post', 
     success: function(json) { 

      console.log(json); 

      for (i = 0; i < Object.keys(json).length; i++) { 
       fillLadder(json[i].place, json[i].name, json[i].wins, json[i].losses, json[i].strk, json[i].exp, json[i].level, json[i].id, ladder); 
      } 

      $('#ladder').DataTable(); //initiating it after appening all the rows 
      $('#match_finder').DataTable(); 

     }, 
     error: function(ts) { 
      console.log("Error: " + ts.responseText); 
     } 
    }); 
} 


$(document).ready(function() { 

    refreshLadder(); 

});