Question

我正在尝试将数据插入到我的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>

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

从代码中可以看出，我在加载DataTable()函数之前将数据插入到表中。不幸的是，DataTables无法识别数据。

Answer 1

根据代码，我认为这是由于时间安排。你的ajax调用可能需要一段时间，移动数据表调用成功应该工作。更新为类似的内容。

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

Answer 2

你可以尝试这样：

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

});

DataTables无法识别数据

2 个答案: