Reload/refresh table after event
Reload/refresh table after event
nec
Posts: 4Questions: 2Answers: 0
I am trying to reload the table but I can't seem to find the way to call the reload function.
In the .done function of the 'revoke' event is where I'm trying to call it $(document).on("click", '.revoke', function (event).
Here is how I'm calling it but fails: $('#example').data.reload(); or table.reload(); or table.ajax.reload();
Any ideas?
<script>
$(document).ready(function () {
var thedata = GetPermissions();
var table = $('#example').DataTable({
data: jQuery.parseJSON(thedata),
columns: [
{ data: 'Professional' },
{ data: 'Patient' },
{
data: "View",
render: function (data, type, row) {
if (data === true) {
return '<input type="checkbox" checked disabled>';
}
return '<input type="checkbox" disabled>';
}
},
{
data: "Edit",
render: function (data, type, row) {
if (data === true) {
return '<input type="checkbox" checked disabled>';
}
return '<input type="checkbox" disabled>';
}
},
{
data: "Insert",
render: function (data, type, row) {
if (data === true) {
return '<input type="checkbox" checked disabled>';
}
return '<input type="checkbox" disabled>';
}
},
{
data: "Delete",
render: function (data, type, row) {
if (data === true) {
return '<input type="checkbox" checked disabled>';
}
return '<input type="checkbox" disabled>';
}
},
{
data: "Revoke",
render: function (data, type, row) {
return '<input type="button" class="btn btn-danger btn-xs revoke" data-pro="' + row.ProfessionalID + '" data-pat="' + row.PatientID + '" name="revoke" value="Revoke">';
}
}
]
});
$(document).on("click", '.revoke', function (event) {
var sf = $.ServicesFramework(<%=ModuleId %>);
var serviceUrl = sf.getServiceRoot('omnibody');
var revoke = { 'ProfessionalID': $(this).data('pro'), 'PatientID': $(this).data('pat') };
$.ajax({
type: "POST",
cache: false,
url: serviceUrl + "/ModuleTask/RevokeAccessRights",
beforeSend: sf.setModuleHeaders,
contentType: "application/json; charset=utf-8",
data: JSON.stringify(revoke)
}).done(function (result) {
//PROBLEM IS HERE
// $('#example').data.reload();
table.reload();
}).fail(function (xhr, result, status) {
alert('GetPermissions ' + xhr.statusText + ' ' + xhr.responseText + ' ' + xhr.status);
});
});
});
function GetPermissions() {
var sf = $.ServicesFramework(<%=ModuleId %>);
var serviceUrl = sf.getServiceRoot('omnibody');
var jdata;
$.ajax({
type: "GET",
cache: false,
async: false,
url: serviceUrl + "/ModuleTask/GetAccessRightsPivoted",
beforeSend: sf.setModuleHeaders,
contentType: "application/json; charset=utf-8"
}).done(function (result) {
jdata = result;
return jdata;
}).fail(function (xhr, result, status) {
alert('GetPermissions ' + xhr.statusText + ' ' + xhr.responseText + ' ' + xhr.status);
});
return jdata;
}
</script>
This question has an accepted answers - jump to answer
Answers
This is the correct one.
When you do that, what happens? Any errors or messages shown on the console?
Won't work because
data.reload()is not a jQuery function.ajax.reload()is specific to the DataTables API.Won't work because there is no top level
reload()method in DataTables.Allan
When I use
table.ajax.reload();I get an error: Uncaught ReferenceError: table is not defined
Please also note the highlights in the Console (debug) (image attached)
It looks like it should be defined from the above.
You could try
$('#example').DataTable().ajax.reload();.Allan
Works with the last suggestion. Great stuff.
thanks it works ..
$('#example').DataTable().ajax.reload();
Is it possible to add some parameters when reloading data?
Use
ajax.datato control the parameters sent to the server during an Ajax request by DataTables.Allan
Thanks!
$('#example').DataTable().ajax.reload(); works, thanks
$('#example').DataTable().ajax.reload(); works like charm in Angular6 application. I used https://l-lin.github.io/angular-datatables/
What if our data isn't ajax? I get JSON Invalid error when using this. And this.table.draw() will "redraw" but sorting still doesn't work til I reload the page manually.
ajax.reload()is for ajax loaded data. How is your data sourced?Sounds like the issue you are trying to resolve is different than this thread. I would suggest creating a new thread describing the issue you are having and posting relevant code.
Kevin
@kthorngren You're correct. I have done so.
Thanks Allan. This works for me:
this is working correctly, thanks
$('#example').DataTable().ajax.reload();Im getting below error if i use $('#example').DataTable().ajax.reload();
DataTables warning: table id=tblClients - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1.
any help?
The help is provided in that link. Did you follow the diagnostic steps explained there?
I was looking for the best way to reload and this worked perfectly
$('#example').DataTable().ajax.reload();
and table holds filters used so the whole table is not loaded from scratch
$('#example').DataTable().ajax.reload(); did not work for me.
But table.ajax.reload(); worked perfectly. I cannot explain why.
same for me it is not working error in JSON
https://datatables.net/tn/1
Did you follow the troubleshooting steps provided in the URL?
http://datatables.net/tn/1.
What did you find?
Kevin
My issue with table.ajax.reload(); is that calling it in the success callback of the ajax delete call triggers a server side refresh that might go wrong due to a race condition (sometimes under some circumstances the refresh still receives the deleted row), that's why I wanted to call row.remove without a refresh, but it seems it can't be done....
@tylerdurden83 Why is there a race condition? If you are using a jQuery Ajax call the success condition will only be called when the server script responds. Presumably the response take place only after the row is deleted so the reloaded data shouldn't have the deleted row.
row().remove()will only remove the row from the table not from the server side database.Maybe you can provide a link to your page or a test case so we can take a look.
Kevin
@kthorngren Thanks for helping me. I'll try to add a bit more details. I'm using Play Framework and this page has worked for a number of years. Now I finally had some time to update to the last version of Play and in the process have upgraded all API to return a CompletionStage (Future) or a Result, not sure if it has something to do with it, but that's when I started to notice that after a ajax call to DELETE, in the success callback I'd call table.ajax.reload, and the deleted row was sometimes still returned from the backend, even though on the database it was gone. Adding a setTimeout in the success callback to fire the ajax reload a second after, this weird situation never happens anymore.
About the row().remove(), since I didn't really need a server side refresh of the whole table what I first did was that just remove from the displayed ones the row that was deleted, commenting out the server side reload altogether. I removed the ajax.reload and replaced it with a table.row.remove(id).draw, but the table would be redrawn still with the deleted row. I read in a comment from allan posted a while ago that this is because table.row.remove(id).draw is ignored if server side loading is enabled for the table.
Not sure that it is ignored, the remove should still be processed. But the
draw()will fetch the current page from the server side script. Since the delete is only in the client but the server script is returning what is in the DB the deleted row returns.Your server script would need to be investigated. Sounds like it is returning a response before the deletion is complete.
Kevin
What if the datatable is in a sub page? How would I reference this.
$('#siteTable3').DataTable().ajax.reload(); doesn't reload the data in the sub page as I am calling from the parent. Any thoughts?
@cthompson Is it because the
tablewith the idsiteTable3is not in the DOM when you use$('#siteTable3').DataTable().ajax.reload();? Maybe you need to call it when the sub page is opened. You can use$.fn.dataTable.isDataTable()to determine if the Datatable exists and if so use$('#siteTable3').DataTable().ajax.reload();.If this doesn't help please create a new thread with your question and hopefully a test case to show us what you are doing.
Kevin
The sub page is already open in the tab. Records provide a button to change data. I want the updated data to show in the sub page after the update (using ajax) completes. the page is home.php.
There's a LOT of code so it would be hard to show/explain.
I'd be happy with any solution that just makes that page completely reload.
Do you get errors in the browser's console? What exactly happens? Does the browser's network inspector show the XHR request?
You can use something like
$('#siteTable3').size()to see if the element is being found.If you are using
ajaxthen you can use thexhrevent to$('#siteTable3').DataTable().ajax.reload();. If using jQuery ajax() you can use thesuccessfunction.We ask for test cases so we can see the code running to get an understanding of whats gong on.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
The ajax succeeds... the page just won't reload.