Editor Refresh Table After Add / Edit
Editor Refresh Table After Add / Edit
When deleting a row the table refreshes as expected, but when adding or editing a row it does not refresh the table data?
// Populates the user table with request/response data from server
users = $('#userTable').DataTable({
pageLength: 25,
responsive: true,
dom: '<"html5buttons"B>lTfgitp',
select: {
style: 'single'
},
ajax: {
url: "/users/get_users",
method: 'POST',
data: {
action: 'request'
}
},
columnDefs: [
{
searchable: false,
orderable: false,
targets: [0]
},
{
searchable: false,
orderable: false,
targets: [5]
},
{
orderable: false,
visible: false,
searchable: false,
targets: [1, 4]
}
],
order: [[2, 'asc']],
columns: [
{data: null, width: "10%"},
{data: 'id'},
{
data: null,
render: function(data, type, row){
var name = data.first_name + ' ' + data.last_name;
/* This adds the key next to users who have administrative privileges */
if(data.is_admin === true){
return "<i class='fa fa-fw fa-key' style='color:#333'></i> " + name;
} else {
return name;
}
}
},
{data: 'email'},
{data: 'is_admin'},
{
data: null, className: 'dt-body-center',
defaultContent: "<button type='button' class='btn btn-primary' data-toggle='modal' " +
"data-target='#keysModal'>Keys</button>"
}
],
buttons: [
{
extend: "create",
text: "<i class='fa fa-plus text-success'></i> Add User",
editor: user_editor
},
{
extend: "edit",
text: "<i class='fa fa-pencil-square-o text-info'></i> Edit User",
editor: user_editor
},
{
extend: "remove",
text: "<i class='fa fa-trash-o text-danger'></i> Delete User",
editor: user_editor
}
]
});
And the editor is configured as the following:
// Edit functions for the users table
user_editor = new $.fn.dataTable.Editor( {
table: "#userTable",
idSrc: 'id',
ajax: {
dataType: 'json',
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
create: {
type: 'POST',
url: '/users/new_users'
},
edit: {
type: 'POST',
url: '/users/edit_users'
},
remove: {
type: 'POST',
url: '/users/delete_users'
}
},
fields: [
{ name: 'id', type: "hidden" },
{ label: "First Name:", name: "first_name", type: "text",
attr: {
maxlength: 25,
placeholder: 'First name'
}
},
{ label: "Last Name:", name: "last_name", type: "text",
attr: {
maxlength: 25,
placeholder: 'Last name'
}
},
{ label: "Email:", name: "email", type: "text",
attr: {
maxlength: 50,
placeholder: 'email@mydomain.com'
}
},
{ label: "", name: "is_admin", type: "checkbox", separator: ";",
options: [{
label: 'Administrator', value: 1 }],
unselectedValue: 0
},
{ label: "Password", name: "password", type: "password" },
{ label: "Repeat Password", name: "password2", type: "password" }
],
formOptions: {
main: {
focus: 'first_name'
}
}
} );
Since I'm new to javascript, please be gentle.
I've tried adding a <datatables>.ajax.reload()
in various places such as the success: function( data, result) { ... here }
in the ajax call but just ended up not being able to display the json returned from the call.
This question has an accepted answers - jump to answer
Answers
I would start be reviewing the Editor Client / Server Data documentation to verify your server scripts are returning the expected responses.
Kevin
Yup, my guess is that they aren't returning the
data
parameter with the data for the newly created / edited rows.Allan
Ah... ok. You might be correct. I'm only returning the following after a successful edit:
I'll review the Client / Server Data docs and go from there. Thanks.
That would do it yes. Editor expects the data for the created or edited row to be returned from the server. That allows any server modified values to be shown (e.g. updated time, updated by, etc).
Allan