I am trying to reload data tables that have been inserted into tabs.
Please refer to question: AJAX Update DataTable after On Success
A PHP class userX.php has 3 data tables with client-side implementations. I am able to change a row of the first table using a button, once it is done the record will go to tab 2 -> and the content of it table two. I am changing the status now using AJAX as this:
$(".changeStatus").click(function(event){ if(confirm("Are you sure changing status?")){ event.preventDefault(); var status = "In Production"; var id = $(this).attr('data-id'); $.ajax({ url : 'dbo.php', method : 'POST', data : {status : status , id : id}, success : function(data){ $('tr#'+id+'').css('background-color', '#ccc'); $('tr#'+id+'').fadeOut('slow'); } }); } else{ return false; } });
In the meantime it has to be updated in the tab 2 table as well. I have tried achieving this using div contents; neither of them seems working. What am I missing? I am open to suggestions.
Advertisement
Answer
The table can simply be reloaded by reinitializing method of the datatable also reloading it through its built in AJAX. The below code block would help.
$(document).on('click','#ChangeNext',function(event){ if(confirm("Are you sure changing status?")){ event.preventDefault(); var statusid = $(this).attr('data-id'); $.ajax({ url : 'dbo.php', method : 'POST', data : {statusid : statusid}, success : function(data) { $('#exampleone').DataTable().ajax.reload(); } }); } else{ return false; } });