Datatables reload on change event

Question

У меня есть html drop down, который изначально заполняет и показывает таблицу данных. Данные поступают из массива json. После того, как вы сбрасываете изменения, я получаю ошибку повторного инициализации и не могу ее исправить.

Я пробовал table.ajax.reload, а также table.fnReloadAjax(); Я работаю с datatables с таким не самым большим с ними.

Вот код:

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