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

코드를 기반으로, 나는 그것이 타이밍에 의한 믿습니다. 아약스 호출이 성공하려면 datatables 호출을 이동하는 데 시간이 걸릴 수 있습니다. 이런 식으로 업데이트되었습니다.

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

});