I am new to programming and I have been trying this for days and still i can't get this data table to refresh after save and update. I used table.ajax.reload() function but it didn't help either.
if ($('#Person').parsley().isValid()) {
var Id = $("#id").val();
var FirstName = $("#firstname").val();
var LastName = $("#lastname").val();
var DOB = $("#dob").val();
var SSN = $("#ssn").val();
var Email = $("#email").val();
var Address = $("#address").val();
var PhoneNo = $("#phone").val();
var Person = {
id: Id,
firstname: FirstName,
lastname: LastName,
dob: DOB,
ssn: SSN,
email: Email,
address: Address,
phoneno: PhoneNo
};
if (Id =="") {
$.ajax(
{
type: "POST",
url: "/Details/SavePerson",
data: JSON.stringify(Person),
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend:function(){
$('#btnSubmit').attr('disabled', 'disabled');
},
success: function (data) {
$('#Person')[0].reset();
$('#btnSubmit').attr('disabled', false);
$('#btnSubmit').val('Submit');
dataTable.ajax.reload();
swal("Done!", "Data has been Saved.!", "success");
}
}
);
}
else {
$.ajax(
{
type: "POST",
url: "/Details/Update",
data: JSON.stringify(Person),
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function () {
$('#btnSubmit').attr('disabled', 'disabled');
},
success: function (data) {
$('#Person')[0].reset();
$('#btnSubmit').attr('disabled', false);
$('#btnSubmit').val('Submit');
swal("Done!", "Data has been Updated.!", "success");
("#persondatatable").Datatable.ajax.reload();
}
})
}
$('#Person').parsley().reset();
}
code for my datatable is
$(document).ready(function () {
var dataTable;
$.ajax({
url: "/Details/GetAllDetails",
type: "Get",
datatype: "json",
success: function (data) {
dataTable = $("#persondatatable").DataTable({
select: true,
data: data,
columnDefs: [
{
"click": false, "targets": [6],
"width": "24%"
}
],
columns: [
{ "data": "Id", "visible": false },
{ "data": "Firstname" },
{ "data": "LastName" },
{ "data": "PhoneNo" },
{ "data": "Email" },
{ "data": "SSN" },
{
"data": "Id", "render": function (data) {
return '<a class="btn btn-primary" style="margin-left:30px" onclick="editdetails(' + data + ')">Edit</a> <a class="btn btn-danger" style="margin-left:5px; margin-right:-15x" onclick="deletedetails(' + data + ')">Delete</a>'
}
}
],
})
$('#persondatatable tbody tr').on('click', function (e) {
var datalist;
var id = dataTable.row(this).data().Id;
$.ajax({
type: 'Post',
url: "/Details/ViewDetails/" + id + " ",
success: function (data) {
FirstName.textContent = data[0].Firstname,
LastName.textContent = data[0].LastName,
Address.textContent = data[0].Address,
DOB.textContent = data[0].DOBString,
Email.textContent = data[0].Email,
Phone.textContent = data[0].PhoneNo,
SSN.textContent = data[0].SSN
}
})
});
}
});
})