Используйте плагин dataTable для jQuery с вложенным Ajax-вызовом

Question

Я пытаюсь использовать вложенный ajax-вызов для заполнения таблицы, и как только таблица будет построена, используйте плагин dataTable jQuery, чтобы привести ее в порядок.

Проблема, с которой я сталкиваюсь, - это вопрос порядка операций. Когда я вызываю функцию dataTable, чтобы быть уверенным, что таблица построена ПОСЛЕ заполнения значений? Когда я пытаюсь выполнить следующий код, dataTable создается до того, как будут построены строки.

<script type="text/javascript">
  $(document).ready(function() {
 $.ajax({
  url:"http://totalrockregistration.com/feeds/bands.php", 
  dataType:"jsonp", 
  success: function(jsonData){
   $.each(jsonData.bands, function(i,bands){
    if (bands.barID == "<?php echo $_GET["barID"]; ?>"){
     var songIdFromBandJson = bands.song;
     var bandNameFromJson = bands.name;
     var bandScoreFromJson = bands.score;
     $.ajax({
      url:"http://totalrockregistration.com/feeds/songs.php", 
      dataType:"jsonp", 
      success: function(songsJsonData){
       $.each(songsJsonData.songs, function(i,songs){
        if (songIdFromBandJson == songs.id){
         var songName=(songs.name);
         $("#leaderBoardTable tbody").append("<tr><td>"+bandNameFromJson+"</td><td>"+bandScoreFromJson+"</td><td>"+songName+"</td></tr>");
        }
       });
      }
     });
    }
   });
   makeLeaderTable();
  },
 });
 function makeLeaderTable(){
  $('#leaderBoardTable').dataTable({
   "aaSorting": [[ 1, "desc" ]],
   "iDisplayLength": 50
  });
 }

  });
</script>

Answer 1

dataTable создается перед построением строк, потому что вложенный ajax-запрос ("http://totalrockregistration.com/feeds/songs.php")" выполняется асинхронно. И функция makeLeaderTable начинает выполняться до завершения ajax-запроса. Таким образом, вы можете вызывать makeLeaderTable при успехе вложенного ajax:

...    
success: function(jsonData){
   $.each(jsonData.bands, function(i,bands){
    if (bands.barID == "<?php echo $_GET["barID"]; ?>"){
     var songIdFromBandJson = bands.song;
     var bandNameFromJson = bands.name;
     var bandScoreFromJson = bands.score;
     var bandsCompleteCounter = jsonData.bands.length;
     $.ajax({
      url:"http://totalrockregistration.com/feeds/songs.php", 
      dataType:"jsonp", 
      success: function(songsJsonData){
       $.each(songsJsonData.songs, function(i,songs){
        if (songIdFromBandJson == songs.id){
         var songName=(songs.name);
         $("#leaderBoardTable tbody").append("<tr><td>"+bandNameFromJson+"</td><td>"+bandScoreFromJson+"</td><td>"+songName+"</td></tr>");
        }
       });
       if((--bandsCompleteCounter) == 0)
         makeLeaderTable();
      }
     });
    }
   });
...