DataTable警告 - 无法重新启动DataTable

时间:2016-07-06 11:50:02

标签: jquery datatables

我正在尝试在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警告 - 无法重新初始化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>

2 个答案:

答案 0 :(得分: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()
  }
  ...
})

答案 1 :(得分:0)

错误Can not reinitialize DataTable明确指出,已经为此元素初始化了数据表。

你可能会在每次成功调用ajax之后销毁数据表并将其初始化为新数据。

$('#example').DataTable( {

应替换为

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

dtExample必须作为函数外部的全局变量添加,以便在以后执行ajax调用时访问它。

为避免这一切,您可以查看示例部分here中解释的数据表的服务器端处理能力