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.

Mitchel Sellers · Accepted Answer · 2016-08-29 07:54:01Z

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

That's it!! Thanks a lot. I was struggling with this for a while already :)
A simple columns section would have solved that quite easy. Parsing JSON and inserting table elements manually is exactly what should be avoided with dataTables. The above solution does not solve the problem which is a general misunderstanding of how to use dataTables, it just fix the misunderstanding so it seems to kind of work...OP will face problems if he try to reload data, which I highly suspect is the purpose of refreshLadder() ...

vijayP · Accepted Answer · 2016-08-29 07:54:05Z

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

});

Collectives™ on Stack Overflow

DataTables not recognizing data

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related