datatables add row within ajax response

Question

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

I think the problem is because you're initialising the datatable inside a function which has the datasource as a parameter. Calling draw is maybe failing because of that. — markpsmith
– markpsmith, Commented Apr 23, 2015 at 13:41
The data is initially populated through a function which runs a getJSON request returning an array and then runs initiliseNotesTable using the data returned by the request. I don't think it's the draw function which is causing this to fail as I tried running the same line without the .draw() chained on and I got the same error. — Suipaste
– Suipaste, Commented Apr 23, 2015 at 15:09

Suipaste · Accepted Answer · 2015-04-27 15:19:23Z

1

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

edited Apr 27, 2015 at 15:19

Suipaste

4208 silver badges17 bronze badges

answered Apr 23, 2015 at 14:15

Rickkwa

2,3015 gold badges25 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Suipaste Over a year ago

I wasn't aware of a render parameter, looks a lot neater. Will try shortly, got some other work to sort first.

Suipaste Over a year ago

Only just got round to trying this a few days later. it's solved the problem and structurally divided the data definition from the render which looks a lot neater. I'm using lots of datatables on my site so this was a good bit of information to learn. Thanks.

Collectives™ on Stack Overflow

datatables add row within ajax response

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest