2016-07-06 166 views
0

我想在Ajax成功上初始化DataTable。它第一次正常工作,但不會再工作,除非我刷新頁面。DataTable警告 - 無法重新啓動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(); 
     } 
     }); 
    } 

錯誤我得到的 - 數據表警告 - 無法初始化數據表。

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> 
+0

你有關於「重新初始化」的含義任何線索? – DKSan

回答

0

錯誤Can not reinitialize DataTable被明確說明,那就是已經有一個DataTable此元素初始化。

在每次成功完成ajax調用之後,您都會毀掉數據表並將其初始化爲新數據表。

$('#example').DataTable({ 

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

dtExample更換已被添加爲一個全局變量的函數外部執行後的Ajax調用時,有機會獲得它。

爲了避免這一切的,你可以看看到數據表的服務器端的處理能力,在實例部分說明here

+0

謝謝。我明白我的做法並不是很正確。我已經用更多的細節修改了我的問題。基本上,我有一個表單接受一個單一的輸入,並點擊提交按鈕啓動ajax請求。 Ajax請求將輸入傳遞給php並獲得JSON_ENCODE響應。我希望我的示例表更新爲該響應。 – Saurabh

1

創建dataTable的前期,在外部範圍:

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

在summaryReport,clear()表和add()新的行,逐一。下面我也設置dataType,所以不需要轉換響應。所有這些都是假設你真的得到有效的JSON早在持有項目的數組中columns指定窗體上的效應初探下:

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