Refresh datatable on Ajax success
26,145
To update a table simply call fnDraw()
on it. Since you are not using global variables, you must retrieve the table first
var $lmTable = $("#line_managers_table").dataTable( { bRetrieve : true } );
$lmTable.fnDraw();
EDIT - to show only the right table you could do something like:
function dialogForms() {
$('a.menubutton').click(function() {
var id = this.id;// Save the id of the clicked button
var a = $(this);
$.get(a.attr('href'),function(resp){
var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html());
$('body').append(dialog);
dialog.find(':submit').hide();
dialog.dialog({
title: a.attr('title') ? a.attr('title') : '',
modal: true,
buttons: {
'Save': function() {
submitFormWithAjax($(this).find('form'), id);// Pass the id to the function
function submitFormWithAjax(form, id) {
form = $(form);
var table_id;
// Choose the table to display depending on the id, i made some guesses but adjust this
switch(id){
case 'view_academic': table_id = '#academic_table';
break;
case 'view_business': table_id = '#business_table';
break;
case 'line_managers': table_id = '#line_managers_list';
break;
}
$.ajax({
url: form.attr('action'),
data: form.serialize(),
type: (form.attr('method')),
dataType: 'script',
success: function(data){
$(this).dialog('close');
// Refresh table
var oTableToUpdate = $(table_id).dataTable( { bRetrieve : true } );
$oTableToUpdate .fnDraw();
// Hide all tables
$('table').hide();
// Show the refreshed
$(table_id).show();
}
});
return false;
}
Related videos on Youtube
Author by
Codded
Updated on July 29, 2022Comments
-
Codded almost 2 years
I am using datatables and jquery dialog. Overall I have 3 forms and 3 datatables. My script is working great but the thing I am struggling with is updating the correct datatable on success of ajax save (It doesn't even have to be the correct corresponding table, it could update all 3 tables on any of the 3 form saves.)
Any guidance would be greatly appreciated.
Page with buttons for showing datatable/forms in dialog
<div style="float:left;"> <button class="menubutton" id="view_academic">Academic</button> <button class="menubutton" id="view_business">Business/Suppport</button> <button class="menubutton" id="line_managers">Managers/Divisions</button> <br/> <br/> </div> <div style="float:right;"> <a href="line_managers_form.php" class="menubutton" id="add_line_managers">Add Managers/Divisions</a> <a href="academic_form.php" class="menubutton" id="add_academic">Add Academic</a> <a href="business_form.php" class="menubutton" id="add_business">Add Business/Suppport</a> <br/> <br/> </div> <div style="clear:both"></div> <div id="academic_list"> <h2>Academic Entitlements</h2> <table class="dataTable" id="academic_table" cellpadding="2" cellspacing="2" width="100%"> <thead> <tr> <th>Year</th> <th>Employee</th> <th>Division</th> <th>Contract</th> <th>Entitlement</th> <th>Line Manager</th> </tr> </thead> <tbody> <tr> <td colspan="4" class="dataTables_empty">Loading data from server</td> </tr> </tbody> </table> </div> <div id="business_list" class="the_options" style="display:none;"> <h2>Business & Manual Entitlements</h2> <table class="dataTable" id="business_table" cellpadding="2" cellspacing="2" width="100%"> <thead> <tr> <th>Year</th> <th>Employee</th> <th>FT/PT</th> <th>Weekly Hours</th> <th>Division</th> <th>Commencement</th> <th>Entitlement</th> <th>Line Manager</th> </tr> </thead> <tbody> <tr> <td colspan="4" class="dataTables_empty">Loading data from server</td> </tr> </tbody> </table> </div> </div> <div id="line_managers_list" class="the_options" style="display:none;"> <h2>Line Managers & Divisions</h2> <table class="dataTable" id="line_managers_table" cellpadding="2" cellspacing="2" width="100%"> <thead> <tr> <th>Division</th> <th>Name</th> <th>Line Manager</th> </tr> </thead> <tbody> <tr> <td colspan="4" class="dataTables_empty">Loading data from server</td> </tr> </tbody> </table> </div>
initialise Datatables
$(function() { // Implements the dataTables plugin on the HTML table var $acTable= $("#academic_table").dataTable( { "oLanguage": { "sSearch": "Filter:" }, "bProcessing": true, "bServerSide": true, "sAjaxSource": "scripts/academic_serverside.php", "iDisplayLength": 10, "bJQueryUI": false, "sPaginationType": "scrolling", "sDom": '<"top"iflp<"clear">>rt>', "sScrollX": "100%", "sScrollXInner": "100%", "bScrollCollapse": true }); }); $(function() { // Implements the dataTables plugin on the HTML table var $buTable= $("#business_table").dataTable( { "oLanguage": { "sSearch": "Filter:" }, "bProcessing": true, "bServerSide": true, "sAjaxSource": "scripts/business_serverside.php", "iDisplayLength": 10, "bJQueryUI": false, "sPaginationType": "scrolling", "sDom": '<"top"iflp<"clear">>rt>', "sScrollX": "100%", "sScrollXInner": "100%", "bScrollCollapse": true }); }); $(function() { // Implements the dataTables plugin on the HTML table var $lmTable= $("#line_managers_table").dataTable( { "oLanguage": { "sSearch": "Filter:" }, "bProcessing": true, "bServerSide": true, "sAjaxSource": "scripts/line_managers_serverside.php", "iDisplayLength": 10, "bJQueryUI": false, "sPaginationType": "scrolling", "sDom": '<"top"iflp<"clear">>rt>' }); }); $(document).ready(function() { $(".the_options").hide(); });
Dialogs/datatables show/hide/open/close and AJAX save form:
$(document).ready(dialogForms); function dialogForms() { $('a.menubutton').click(function() { var a = $(this); $.get(a.attr('href'),function(resp){ var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html()); $('body').append(dialog); dialog.find(':submit').hide(); dialog.dialog({ title: a.attr('title') ? a.attr('title') : '', modal: true, buttons: { 'Save': function() { submitFormWithAjax($(this).find('form')); $(this).dialog('close'); $lmTable.fnDraw(''); }, 'Cancel': function() {$(this).dialog('close');} }, close: function() {$(this).remove();}, width: 600, height: 500 }); }, 'html'); return false; }); } function submitFormWithAjax(form) { form = $(form); $.ajax({ url: form.attr('action'), data: form.serialize(), type: (form.attr('method')), dataType: 'script', success: function(data){ $(this).dialog('close'); $lmTable.fnDraw(''); } }); return false; } $(function() { $("#add_academic") .button() .click(function() { $("#academic-form").dialog( "open" ); }); $("#add_line_managers") .button() .click(function() { $("#line-managers-form").dialog( "open" ); }); $("#add_business") .button() .click(function() { $("#business-form").dialog( "open" ); }); $("#view_academic") .button() .click(function() { $('#academic_list').show(); $('#business_list').hide(); $('#line_managers_list').hide(); }); $("#view_business") .button() .click(function() { $('#academic_list').hide(); $('#business_list').show(); $('#line_managers_list').hide(); }); $("#line_managers") .button() .click(function() { $('#academic_list').hide(); $('#business_list').hide(); $('#line_managers_list').show(); }); });
-
Codded almost 12 yearsCould i private chat with you, i think i know what the issue may be but not sure how to fix it.
-
Codded almost 12 yearsAlthough the origional part of this answer is working, it does not always update on the first instance of save. Do you think it may be refreshing before saving? It does however work everythim after the first instance. Any Ideas?
-
Nicola Peluchetti almost 12 years@Codded that's strange. Have you checked with console.log or an alert that fnDraw() is really called?
-
Codded almost 12 yearsseems ok in firefox. I tested earlier in opera.