DataTable警告 - 无法重新启动DataTable

我想在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>

来源

2016-07-06 Saurabh

你有关于“重新初始化”的含义任何线索？ – DKSan

错误Can not reinitialize DataTable被明确说明，那就是已经有一个DataTable此元素初始化。

在每次成功完成ajax调用之后，您都会毁掉数据表并将其初始化为新数据表。

$('#example').DataTable({

应

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

dtExample更换已被添加为一个全局变量的函数外部执行后的Ajax调用时，有机会获得它。

为了避免这一切的，你可以看看到数据表的服务器端的处理能力，在实例部分说明here

来源

2016-07-06 12:03:59 DKSan

谢谢。我明白我的做法并不是很正确。我已经用更多的细节修改了我的问题。基本上，我有一个表单接受一个单一的输入，并点击提交按钮启动ajax请求。 Ajax请求将输入传递给php并获得JSON_ENCODE响应。我希望我的示例表更新为该响应。 – Saurabh

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

来源

2016-07-06 13:24:20 davidkonrad

DataTable警告 - 无法重新启动DataTable

回答

相关问题