How to refresh data table, after save or update
How to refresh data table, after save or update
dan-z
Posts: 10Questions: 2Answers: 0
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
}
})
});
}
});
})
This discussion has been closed.
Answers
Since you aren't using
ajaxthedataTable.ajax.reload();isn't going to work as there is no Datatables Ajax config. Instead of using jQuery Ajax to fetch the Datatables data useajaxalong withajax.dataSrcset to"". The docs have an example of this. Then thedataTable.ajax.reload();should work.Kevin
I used this syntax but it didn't work, here is my code for update after changes
above code outputs a json result like
[{Id: 3, EmailId: 0, AddressId: 0, PhoneId: 0, Firstname: "danudhdhara", LastName: "wijesooriya",…},…]
0: {Id: 3, EmailId: 0, AddressId: 0, PhoneId: 0, Firstname: "danudhdhara", LastName: "wijesooriya",…}
1: {Id: 4, EmailId: 0, AddressId: 0, PhoneId: 0, Firstname: "danushka", LastName: "jayasooriya",…}
2: {Id: 16, EmailId: 0, AddressId: 0, PhoneId: 0, Firstname: "Thushara", LastName: "Hettigoda",…}
3: {Id: 17, EmailId: 0, AddressId: 0, PhoneId: 0, Firstname: "Sanduni", LastName: "Jayasooriya",…}
4: {Id: 18, EmailId: 0, AddressId: 0, PhoneId: 0, Firstname: "Madushan", LastName: "Herath",…}
5: {Id: 19, EmailId: 0, AddressId: 0, PhoneId: 0, Firstname: "Minidu", LastName: "Jayasooriya",…}
which is updated but does not show any changes in my data table
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
What I meant was to change the code in your second code snippet above. Remove the jQuery Ajax request and change it so that Datatables uses -
option ajaxto initially fetch the data. Then you can useajax.reload().Kevin
I have done as you said, now the console popups error
"Cannot read property 'length' of undefined"
but i have been passing only six parameters for six columns and seventh column is for
actions.
Please can i have an explanation for this.
The reason is that you have all the Datatables options inside the
ajaxoption. Should look more like this:Kevin
nothing really changed, but i have recorded this in the following link with out data
Seven columns are there in the data table
i am taking six values from database
they are
Id, Firstname, Lastname, Phoneno , Email and SSN
seventh column is action column and i am taking the Id to that column as well
I tried deleting first column Id, from table and reinitialized but another error popped up saying
"Cannot read property 'length' of undefined"
can i have an explanation for this
http://live.datatables.net/dorenuha/1/edit
That examples looks like it should work - I removed
ajaxand added withdata, see here.If that doesn't help, please can you create a test case that replicates the problem.
Colin
the above array worked fine, but why doesn't retrieved data from database doesn't initialize it still says Cannot read property 'length' of undefined.
Are all the fields present in the Ajax response? Can you post a couple of records here, please - what you posted above was truncated on each record so doesn't give the full picture.
Colin
All the fields requested are present in the ajax request, but it doesn't show up in the data table.
Colin asked to see the data which you aren't providing. Without that its impossible to help. If its a large data set then use the debugger to collect the information. Provide the resulting ID so the developers can take a look at the JSON response.
Kevin
Did you remove both the column in both Datatables and the HTML
table? They need to match.Kevin