datatable jquery Не удается повторно инициализировать DataTable

Question

Я использую datatable плагин jQuery для заполнения данных в таблицу. Мне нужно получить данные от ajax-вызова, когда пользователь нажимает кнопку и заполняет данные в таблице.

Мой код Ajax вызов заключается в следующем:

function getJsonReport() { 
      var startDate = $('#start_date').val(); 
      var endDate = $('#end_date').val(); 
      $.get('MonthlyReportAjax', {startDate : startDate , endDate : endDate}, function(responseText) {    

       var tableBody=""; 
       for(var x = 0 ; x < responseText["monthRecord"].length ; x++){ 
        tableBody += "<tr><td>"+ responseText["monthRecord"][x].date +"</td>"+ 
             "<td>"+ responseText["monthRecord"][x].newSearch +"</td>"+ 
             "<td>"+ responseText["monthRecord"][x].newSubscribers +"</td>"+ 
             "<td>"+ responseText["monthRecord"][x].pm12 +"</td>"+ 
             "<td>"+ responseText["monthRecord"][x].pm3 +"</td>"+ 
             "<td>"+ responseText["monthRecord"][x].pm6 +"</td>"+ 
             "<td>"+ responseText["monthRecord"][x].newAdds +"</td>"+ 
            "</tr>" 
       } 

       $('#dailyTableBody').html(tableBody); 
       $('#tableID').DataTable(); 
      }); 
     } 

первый раз он работает отлично, но если пользователь снова нажать кнопку дает ошибку говоря:

Не удается инициализировать DataTable.

Чтобы получить DataTables объекта для этой таблицы, не передавать никаких аргументов или увидеть документы для bRetrieve и bDestroy

Answer 1

Если вы собираетесь сохранить существующую реализацию следующие будет работать. Проблема, с которой вы сталкиваетесь, связана с сообщением об ошибке: вы не можете инициализировать новый DataTable, где он уже существует, поэтому вам нужно его уничтожить и воссоздать аналогично приведенному ниже.

DataTables Destroy API-вызов - это то, что вам нужно.

Пример (непроверенные):

$('#submit').on('click', function() { 
    var table = $('#myTable').dataTable() || false; 
    if (table) { 
     table.api().destroy(); 
    } 
    getJsonReport(); // Run your update function 
}); 

ПримечаниеdataTable часть. Этот синтаксис требуется при вызове api().

Функция getJsonReport() останется неизменной. Я бы на самом деле использовал другую конструкторскую модель в DataTable, которая сама содержит всю логику для DataTable, а затем использует API исключительно для любого обновления. Для этого требуется рефакторинг того, как создается таблица, поэтому я не хотел ее включать, но если вы хотите увидеть мой подход к datatables (мне пришлось использовать эту библиотеку в течение многих лет на работе, пока мы не пошли Angular;)) и Я буду рад предоставить его.

Надеюсь, это поможет.

Answer 2

Код ниже не проверен, но он должен показать вам, что я предлагаю в своем комментарии выше, и будет немного корректировать работу для вас. Это позволяет DataTable делать все подъемные операции. Он заменяет getJsonReport, инициализирует загрузку и использует кнопку go, чтобы инициировать выборку данных.

$(document).ready(function(){ 
     $("#tableID").DataTable({columns:[{data:"date"}, {data:"newSearch"}, {data:"newSubscribers"}, {data:"pm12"}, {data:"pm3"}, {data:"pm6"}, {data:"newAdds"}], 
      deferLoading:0, 
      dom""Bt", 
      serverSide:true, 

      buttons:[{text:"Go", action: function(){ 
       $("#tableID").DataTable().ajax.reload(); 
      }}], 
      ajax: {type:"get", 
       dataSrc:"", 
       url:'MonthlyReportAjax', 
       data: function() {return {startDate : $('#start_date').val() , endDate : $('#end_date').val()} 
       } 
      } 
     }); 

}) 

Answer 3

В Java Script поставить этот код ...

$('#idTable').dataTable({ 
    destroy: true 
     });