DataTable Warnung - DataTable kann nicht reinitiliaze

Question

Ich versuche, eine DataTable auf Ajax Success zu initialisieren. Es funktioniert gut zum ersten Mal, wird aber nicht funktionieren, wenn ich die Seite nicht aktualisiere.

JS Funktion:

this.summaryReport = function() 
    { 
     crsf = $("input[name=csrftestname]").val(); 
     searchClients = $("#searchClients").val(); 
     $('#loadingmessage').show(); 
     $.ajax({ 
     url: url+"query_report_summary", 
     type: "post", 
     cache: false, 
     data: {"csrftestname": crsf, searchClients: searchClients}, 
     success: function(query_result) 
     { 
      var data = $.parseJSON(query_result); 
      $('#example').DataTable({ 
      data: data, 
      columns: [ 
      { data: "name" }, 
      { data: "location" }, 
      { data: "source" }, 
      { data: "contact" }, 
      { data: "number" }, 
      { data: "status" } 
      ] 
      }); 
      self.reportSummary(data); 
     }, 
     complete: function() 
     { 
      $("#reportSummaryForm")[0].reset(); 
      $('#loadingmessage').hide(); 
     } 
     }); 
    } 

Fehler i bekommen habe ist - Datatable Warnung - kann nicht neu initialisiert Datatable.

HTML:

<form role="form" class="" id="reportSummaryForm"> 
      <input type="hidden" name="<?php echo $this->security->get_csrf_token_name(); ?>" value="<?php echo $this->security->get_csrf_hash(); ?>"> 
      <div class="input-group input-group-sm"> 
       <input class="form-control input-sm" type="text" id="searchClients" name="searchClients" placeholder=""> 
       <span class="input-group-btn"> 
        <button type="button" class="btn btn-sm btn-primary" data-bind="click: summaryReport">Search</button> 
       </span> 
      </div> 
     </form> 

<table id="example" class="display" width="100%"></table> 

Answer 1

Der Fehler Can not reinitialize DataTable wird eindeutig erklärt, dass es bereits eine Datentabelle für dieses Element initialisiert.

Sie müssten die Datentabelle nach jedem erfolgreichen Ajax-Aufruf zerstören und als neuen initialisieren.

$('#example').DataTable({ 

sollte

dtExample.destroy(); 
dtExample = $('#example').DataTable({ 

dtExample außerhalb Ihrer Funktion als globale Variable hinzugefügt werden ersetzt den Zugriff darauf haben, wenn später Ajax-Aufrufe durchführen.

Um zu vermeiden, all dies Sie einen Blick in serverVerarbeitungsFähigkeiten von Datentabellen erklärten im Beispielteil here

Answer 2

Erstellen Sie Ihre Datatable im Voraus, in dem äußeren Umfang haben könnten:

var table = $('#example').DataTable({ 
    columns: [ 
    { data: "name" }, 
    { data: "location" }, 
    { data: "source" }, 
    { data: "contact" }, 
    { data: "number" }, 
    { data: "status" } 
    ] 
}); 

In Summaryreport, clear() die Tabelle und add() die neuen Zeilen, eins nach dem anderen. Unten setze ich auch die dataType so Umwandlung der Antwort nicht benötigt wird. Alles ist unter der Annahme, dass Sie wirklich gültig JSON zurück in die reponse erhalten, die ein Array von Elementen auf dem Formular in columns angegeben gilt:

$.ajax({ 
    url: url+"query_report_summary", 
    type: "post", 
    cache: false, 
    data: {"csrftestname": crsf, searchClients: searchClients}, 
    dataType: 'json', 
    success: function(data) { 
    table.clear() 
    data.forEach(function(row) { 
     table.row.add(row) 
    }) 
    table.draw() 
    } 
    ... 
})