Add a new row from ajax response (json)
Add a new row from ajax response (json)
I am 99% of the way home. I just can't get over the hump with this one...
Here is how I am initializing my table:
$('#mytable').dataTable({
'data': mydata,
'columnDefs': [{
'targets': 0,
'title': '',
'sortable': false,
'class': 'text-center',
'data': function () {
return '<a href="#" class="edit"><i class="fa fa-pencil-square-o fa fa-lg"></i></a>';
}
},
{
'targets': 1,
'title': "Name",
'data': 'name'
},
{
'targets': 2,
'title': "Status",
'render': function (data, type, row) {
return '<span class="status status-' + (row.status).toLowerCase() + '">' + row.status + '</span>';
}
},
{
'targets': 3,
'title': '',
'sortable': false,
'render': function (data, type, row) {
return '<a href="#" class="remove" data-id="' + row.employee_id+ '"><i class="fa fa-times fa-lg"></i></a>';
}
}],
'order': [[1, 'asc']]
});
}
});
I have an "Add New" button that is successfully inserting a new record - and returning that record back to me.
This is the error I'm getting:
DataTables warning: table id={id} - Requested unknown parameter '{parameter}' for row {row-index}
var employee= $.parseJSON(response);
console.log(employee);
var $table = $('#mytable').DataTable();
$table.row.add([{
// can't figure this out. how to assign 'name'
}]).draw();
Here is the data coming back (employee):
employee_id: "123"
name: "Joe Dirt"
I just can't figure out how to assign the properties back to the table columns.
Answers
Looks like you are passing in an array. If you are, you should use
rows.add()
to add multiple rows.row.add()
is for a single row only (if you do want a single row, don't use an array - as that looks like it is the issue).Allan
Thank you very much!!