数据表在 ajax 响应中添加行

Question

我在 ajax 成功响应中向数据 table 添加新行时遇到一些问题。我查看了文档并进行了搜索，但找不到任何与我的问题相似的内容。

我的 table 像这样初始化并且渲染良好：

function initiliseNotesTable(pNotesData) {
  notesTable = $('#notesTable')
      .DataTable({
          searching: false,
          "bLengthChange": false,
          "bPaginate": true,
          "bDestroy": true,
          "data": pNotesData,
          "columns": [{
              "title": "Date",
              "data": "dateTime.toDateString()"
          }, {
              "title": "User",
              "data": "userName"
          }, {
              "title": "Type",
              "data": "categoryDescription"
          }, {
              "title": "Note",
              "data": "text"
          }]
      });
}

当我想向 table 添加新行时，我使用 ajax 将数据发送到服务器。

        $.ajax({
      type: "POST",
      url: 'rest/maintain-note/',
      data: newNote,
      success: function(data) {
          notesTable.row.add(data).draw();
        },
       dataType: 'json',
          contentType: 'application/json'
  });

成功返回的数据与用于构造 table 的数据的形状完全相同，只是它是单个对象而不是数组。

categoryDescription: "TestType"
categoryID: "5575"
dateTime: 1429787295644
entityID: "1234544950"
entityTypeID: "111"
lockID: null
sequence: null
text: "test"
userName: "Test"

然而当我到达 notesTable.row.add(data).draw();控制台产生错误并且 table 没有改变。错误如下：

Uncaught TypeError: data[a[i]] is not a functionfetchData @     jquery.dataTables.js:1277(anonymous function) @ jquery.dataTables.js:1293oCol.fnGetData @ jquery.dataTables.js:702_fnGetCellData @ jquery.dataTables.js:1112_fnCreateTr @ jquery.dataTables.js:1694_fnAddData @ jquery.dataTables.js:1037(anonymous function) @ jquery.dataTables.js:7893_Api.iterator @ jquery.dataTables.js:6868(anonymous function) @ jquery.dataTables.js:7889(anonymous function) @ jquery.dataTables.js:7031$.ajax.success @ notes.js:138jQuery.Callbacks.fire @ jquery.js:3048jQuery.Callbacks.self.fireWith @ jquery.js:3160done @ jquery.js:8235jQuery.ajaxTransport.send.callback @ jquery.js:8778

但是，如果您随后更改分页页面，则总行数值会发生如下变化：

来自显示 102 个条目中的第 11 到 20 个

至显示 102 个条目中的第 11 到 20 个（从总共 103 个条目中过滤）

这表明新行已创建，但未显示。

有没有人知道错误发生的原因以及新行在 table 中不可见的原因？我无法从错误消息中得出任何有用的信息。我所有的尝试都涉及根据我在文档中找到的各种不同的输入数据方式更改以下行，但可惜我没有运气：

notesTable.row.add(数据).draw();

Answer 1

尝试将日期列更改为以下内容：

{
    "title": "Date",
    "data": "dateTime",
    "render": function(timestamp) {
        return new Date(timestamp).toDateString()
    }
}

我删除了 "data" : "dateTime.toDateString()" 末尾的 .toDateString()，并使用了 render 选项。

有关渲染选项的更多信息，请参阅文档： https://datatables.net/reference/option/columns.render

数据表在 ajax 响应中添加行

datatables add row within ajax response

jquery

ajax

jquery-datatables