Use jQuery's dataTable plugin with a nested Ajax call
- by mrr0ng
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>
