使用jQuery的dataTable插件和嵌套的Ajax调用

I am trying to use a nested ajax call to populate a table, and once the table is built, use jQuery's dataTable plugin to pretty it up.

我试图使用嵌套的ajax调用来填充表，一旦构建了表，使用jQuery的dataTable插件来完善它。

The problem I am running into is an order of operations question. When do I call the dataTable function so that I can be assured that the table is built AFTER the values are populated? When I try the following code, the dataTable is created before the rows are built.

我遇到的问题是操作顺序问题。我何时调用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>

1 个解决方案

#1

The dataTable is created before the rows are built because nested ajax request(to "http://totalrockregistration.com/feeds/songs.php") is executed asynchronously. And function makeLeaderTable starts to be executed before ajax-request is finished. So you can invoke makeLeaderTable on nested ajax`s success:

在构建行之前创建了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();
      }
     });
    }
   });
...

1 个解决方案

#1

更多相关文章

随机推荐