DataTables not recognizing data

Question

I'm trying to insert data into my DataTable.

I have the following code:

DataTable:

<table id="ladder" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
         <tr>
            <th>Place</th>
            <th>Team Name</th>
            <th>W - L</th>
            <th>Strk</th>
            <th>Exp</th>
            <th>Level</th>
         </tr>
     </thead>
     <tbody id="ladder_stats">

     </tbody>
</table>

The JQuery:

function fillLadder(place, name, w, l, strk, exp, lvl, id, ladder) {

    $('<tr><td>' + place + '</td><td><a href="/team?id=' + id + '&l=' + ladder + '">' + name + '</a></td><td>' + w + ' - ' + l + '</td><td>' + strk + '</td><td>' + exp + '</td><td>' + lvl + '</td></tr>').appendTo('#ladder_stats');
}

function refreshLadder() {

    var ladder = $.urlParam('l');

    $.ajax({ 

     url: '/data/ladder_stats.php',
        data: {l: ladder},
        dataType: 'json',
        type: 'post',
        success: function(json) {

            console.log(json);

            for (i = 0; i < Object.keys(json).length; i++) { 
                fillLadder(json[i].place, json[i].name, json[i].wins, json[i].losses, json[i].strk, json[i].exp, json[i].level, json[i].id, ladder);
            }

        },
        error: function(ts) {
            console.log("Error: " + ts.responseText);
        }
    });
}


$(document).ready(function() {

    refreshLadder();
    $('#ladder').DataTable();
    $('#match_finder').DataTable();
});

As you can see from the code, I'm inserting the data into the table before I load the DataTable() function. Unfortunately DataTables does not recognize the data.

Answer 1

Can you try like this:

function refreshLadder() {

    var ladder = $.urlParam('l');

    $.ajax({ 

     url: '/data/ladder_stats.php',
        data: {l: ladder},
        dataType: 'json',
        type: 'post',
        success: function(json) {

            console.log(json);

            for (i = 0; i < Object.keys(json).length; i++) { 
                fillLadder(json[i].place, json[i].name, json[i].wins, json[i].losses, json[i].strk, json[i].exp, json[i].level, json[i].id, ladder);
            }

            $('#ladder').DataTable(); //initiating it after appening all the rows
            $('#match_finder').DataTable();

        },
        error: function(ts) {
            console.log("Error: " + ts.responseText);
        }
    });
}


$(document).ready(function() {

    refreshLadder();

});

Answer 2

Based on the code, I believe it is due to the timing. Your ajax call could take a while, moving the datatables call to the success should work. Updated to something like this.

function fillLadder(place, name, w, l, strk, exp, lvl, id, ladder) {

    $('<tr><td>' + place + '</td><td><a href="/team?id=' + id + '&l=' + ladder + '">' + name + '</a></td><td>' + w + ' - ' + l + '</td><td>' + strk + '</td><td>' + exp + '</td><td>' + lvl + '</td></tr>').appendTo('#ladder_stats');
}

function refreshLadder() {

    var ladder = $.urlParam('l');

    $.ajax({ 

     url: '/data/ladder_stats.php',
        data: {l: ladder},
        dataType: 'json',
        type: 'post',
        success: function(json) {

            console.log(json);

            for (i = 0; i < Object.keys(json).length; i++) { 
                fillLadder(json[i].place, json[i].name, json[i].wins, json[i].losses, json[i].strk, json[i].exp, json[i].level, json[i].id, ladder);
            }

            //Rows created, now we can make tables
            $('#ladder').DataTable();
            $('#match_finder').DataTable();

        },
        error: function(ts) {
            console.log("Error: " + ts.responseText);
        }
    });
}


$(document).ready(function() {

    refreshLadder();
});