DataTable警告 - DataTableを再初期化できません。

Question

Ajax SuccessでDataTableを初期化しようとしています。初めて正常に動作しますが、ページを更新しない限り再動作しません。

JS機能：私は取得しています

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

エラーがある - の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

エラーCan not reinitialize DataTableは明らかにこの要素の初期化データテーブルが既に存在していることを、述べています。

成功した各Ajaxコールの後にデータテーブルを破棄し、新しいAjaxコールとして初期化するといいでしょう。

$('#example').DataTable({ 

は

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

dtExampleに置き換える必要があり、後にAJAX呼び出しを実行するときに、それへのアクセス権を持っているあなたの関数の外でグローバル変数として追加する必要があります。すべてこれを避けるために

あなたは例のセクションにhere

Answer 2

をのDataTableのサーバーサイドの処理能力に見て説明している可能性が外側のスコープで、あなたのdataTable先行を作成します。summaryReportで

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

、clear()を新しい行を1つずつ順番にテーブルに追加します（add()）。以下、私はdataTypeを設定しているので、応答の変換は必要ありません。すべては、あなたが本当に戻ってcolumnsに指定されたフォーム上の項目の配列を保持REPONSEで有効なJSONを取得するという仮定の下で：

$.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() 
    } 
    ... 
})