javascript - 数据表在更改事件时重新加载

Question

我有一个 html 下拉列表，它最初填充并显示数据表。数据来自 json 数组。更改下拉列表后，我收到重新初始化错误并且无法修复它。

我试过 table.ajax.reload 和 table.fnReloadAjax();我断断续续地使用数据表，所以对它们不是最好的。

代码如下:

function Population() {
var table = $('#Population').dataTable();

$("#quickStats").change(function () {

    var optionValue = $("#quickStats").val();
    console.log(optionValue);

    if (optionValue == 1) {
        $("#display").append('<table cellpadding="0" cellspacing="0" border="0" class="display" id="Population">' +            
        '<thead><tr><th>Demographic</th><th>Total</th></thead>'
         + '</table>');


    $('#Population').dataTable({
        "data": usPopulation,
        "bJQueryUI":true,
        "columns": [
            { "data": "Demographic" },
            { "data": "Total" }

        ],
    });
}
    table.ajax.reload();

});
}

Answer 1

尝试在创建新的之前销毁前一个:

$('#Population').dataTable().fnDestroy();


 $('#Population').dataTable({
        "data": usPopulation,
        "bJQueryUI":true,
        "columns": [
            { "data": "Demographic" },
            { "data": "Total" }

        ],
    });

或者这样做:

var table = $('#Population').dataTable({
            "data": usPopulation,
            "bJQueryUI":true,
            "columns": [
                { "data": "Demographic" },
                { "data": "Total" }

            ],
        });

table.draw();