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.

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.

<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>