带有有效数据的数据表警告

Question

我正在尝试使用以下代码初始化数据表对象：

$(document).on('click', '.queued_auto_responders', function (event) {
  // queued_ids from the clicked row
  var queued_ids = $(this).attr('data-queued-ids').split(',');

  // Set the respective controls' values
  $.get("assets/php/get_queued_responders.php", {queued_ids: queued_ids})
    .done(function(n) {
      var table_queued_responders = $('#queued_auto_responders').DataTable({
        data: n,
        columns: [
          { data: 'send_date', title: 'Send Date'},
          { data: 'title', title: 'Title' },
          { data: 'markup', title: 'Action', createdCell:
            function (td, cellData, rowData, row, col) {
              $(td).html(cellData);
            }
          }
        ]
      });
    })
    .fail(function(n) {
      console.log(n.responseText);
    });
});

并且返回的数据是由 Network > XHR > [file] > Response 验证的以下 JSON：

[
  {
    "send_date": "2019-01-17",
    "title": "...",
    "markup": "<a type=\"button\" class=\"d-block text-center text-danger\" href=\"assets/php/stop_queued_responder.php?queue_id=71\">Stop from Sending</a>"
  },
  {
    "send_date": "2018-06-01",
    "title": "...",
    "markup": "<a type=\"button\" class=\"d-block text-center text-danger\" href=\"assets/php/stop_queued_responder.php?queue_id=72\">Stop from Sending</a>"
  },
  {
    "send_date": "2018-06-11",
    "title": "...",
    "markup": "<a type=\"button\" class=\"d-block text-center text-danger\" href=\"assets/php/stop_queued_responder.php?queue_id=73\">Stop from Sending</a>"
  }
]

返回的错误如下：

DataTables 警告：表 id=queued_auto_responders - 请求第 0 行第 0 列的未知参数“send_date”。有关此错误的详细信息，请参阅http://datatables.net/tn/4

每当我关注错误消息中的 URL 时，它都会指向 Parameter is a String 类别，该类别指出错误通常是因为：

• 指定的数据属性不存在（数据中有错字或空白）
• 指定的属性值为空

但是从返回的数据可以看出，我的数据确实满足这两个条件中的任何一个。我还验证了返回的数据是否与 Object 类别的数据格式匹配。

那么为什么我会收到这个错误？

更新

这是我正在尝试初始化的表的标记：

<table class="table" id="queued_auto_responders">
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>

我正在使用 DataTables 1.10.16。

Answer 1

尝试下一个更改（降级为更基本的示例）：

HTML 标记

<table class="table" id="queued_auto_responders">
    <thead>
    <tr>
        <th>Send Date</th>
    </tr>
    </thead>
</table>

JAVASCRIPT

$(document).ready(function()
{
    $(".queued_auto_responders").on('click', function(event)
    {
        // queued_ids from the clicked row
        var queued_ids = $(this).attr('data-queued-ids').split(',');

        // Set the respective controls' values.
        $.getJSON("assets/php/get_queued_responders.php", {queued_ids: queued_ids})
        .done(function(n)
        {
            console.log("Received data: ");
            console.log("Received type of data: " + typeof(n));
            console.log(n);

            var table_queued_responders = $('#queued_auto_responders').DataTable({
                data: n,
                columns: [
                    {data: 'send_date'}
                ]
            });
        })
        .fail(function(n)
        {
            console.log(n.responseText);
        });
    });
});