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

，返回的数据为以下JSON，已通过网络> XHR> [文件]>响应进行验证：

[
  {
    "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-请求的未知参数'send_date'为第0行第0列。有关此错误的更多信息，请参见http://datatables.net/tn/4

每当我遵循错误消息中的URL时，它就会指向参数是字符串类别，该类别指出错误通常是由于以下原因：

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

但是从返回的数据可以看出，我的数据确实满足这两个条件之一。我还验证了返回的数据是否与 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);
        });
    });
});

数据表警告有效数据

1 个答案: