Refresh DataTable after form submission


This Discussion is public


I have a page with a form and DataTable (datatables.js) under it showing the submitted info. for the life of me, I am unable to have the table refresh after the form submit, though. Neither of the recommended "$('MYTABLE').DataTable().ajax.reload();" or "$('MYTABLE').DataTable().rows.add();", are working.

Has anyone managed to refresh the table without a full page refresh? I'd like to allow the user to make multiple submissions quickly and see the rows added right away.


I've been using a js redirect in the "Message" content of my form settings for updating tables as follows:

jQuery('.entry-content').html('<center>Your entry was successfully submitted. Thank you! Please wait as you are redirected...</br><img src="<loading gif url here>" style="max-height:100px;"></center>');
setTimeout(function () {
window.location.href = ' ';
}, 1000);

.entry-content would be the container of the content on your page. The form will show once again when the page is reloaded and it prevents duplicate entries.

Thanks Bobby. The page refreshes fine currently. I'm needing the table itself to refresh without a full page refresh.

You'll probably need to create a click event for the form button that loads the page with something like this:
$('#mainContainer').load('loadpage.html #nav1div');

Reply to this Discussion