使用带有嵌套 Ajax 调用的 jQuery 的 dataTable 插件答案

【问题标题】：Use jQuery's dataTable plugin with a nested Ajax call使用带有嵌套 Ajax 调用的 jQuery 的 dataTable 插件
【发布时间】：2010-04-28 23:19:55
【问题描述】：

我正在尝试使用嵌套的 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>

【问题讨论】：

标签： jquery ajax json datatable nested

【解决方案1】：

dataTable 是在构建行之前创建的，因为嵌套的 ajax 请求（到“http://totalrockregistration.com/feeds/songs.php”）是异步执行的。并且函数 makeLeaderTable 在 ajax-request 完成之前开始执行。因此，您可以在嵌套 ajax 成功时调用 makeLeaderTable：

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

【讨论】：