CODEWITHSUNDEEP
jqueryajaxdatatables
Suipaste
Suipaste

Reputation: 420

datatables add row within ajax response

I'm having some issues adding a new row into a datatable within an ajax success response. I've had a look through the documentation and had a search but couldn't find anything which resembled my issue.

My table is initialized like so and renders fine:

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

When I want to add a new row to the table I send the data to the server with ajax.

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

The data returned in success is in exactly the same shape as the data used to construct the table except it is a single object as opposed to an array.

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

However when I reach notesTable.row.add(data).draw(); the console produces an error and the table does not change. The error is below:

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

However if you then change the paginate page the total rows value changes like so:

From Showing 11 to 20 of 102 entries

To Showing 11 to 20 of 102 entries (filtered from 103 total entries)

This shows the new row has been created but is just not shown.

Does anyone have any ideas about why the error occurs and why the new row is not visible in the table? I can't draw anything useful from the error message. All my attempts have involved changing the following line based on various different ways of inputting data I found in the documentation but alas I've had no luck:

notesTable.row.add(data).draw();

Upvotes: 0

Views: 4586

Answers (1)

Rickkwa
Rickkwa

Reputation: 2291

Try changing the date column to the following:

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

I removed the .toDateString() from the end of "data" : "dateTime.toDateString()", and used the render option instead.

For more information about the render option see the documentation: https://datatables.net/reference/option/columns.render

Upvotes: 1

Related Questions