使用jQuery的dataTable插件與嵌套的Ajax調用

Question

我想使用嵌套的ajax調用來填充表，並且一旦表被構建，使用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

之前因爲嵌套AJAX請求（爲「http://totalrockregistration.com/feeds/songs.php」）是異步執行的行被內置數據表被創建。並且函數makeLeaderTable在ajax-request完成之前開始執行。 所以你可以調用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(); 
     } 
    }); 
    } 
    }); 
...