数据表在ajax响应中添加行

时间:2015-04-23 12:37:14

标签: jquery ajax jquery-datatables

我在ajax成功响应中的数据表中添加新行时遇到了一些问题。我已查看过文档并进行了搜索,但无法找到与我的问题类似的任何内容。

我的表被初始化为这样并呈现正常:

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

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

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

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

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

但是当我到达notesTable.row.add(data).draw();控制台产生错误,表不会更改。错误如下:

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个条目中过滤掉)

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

有没有人对错误发生的原因以及为什么新行在表中不可见有任何想法?我无法从错误消息中提取任何有用的内容。我所有的尝试都涉及根据我在文档中找到的各种不同的输入数据的方式更改以下行,但是我没有运气:

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

1 个答案:

答案 0 :(得分:1)

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

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

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

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