title: Refresh datatable on Ajax success
body: <p>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.)</p>
  
  <p>Any guidance would be greatly appreciated.</p>
  
  <p><strong>Page with buttons for showing datatable/forms in dialog</strong></p>
  
  <pre><code>&lt;div style="float:left;"&gt;
  &lt;button class="menubutton" id="view_academic"&gt;Academic&lt;/button&gt;
  &lt;button class="menubutton" id="view_business"&gt;Business/Suppport&lt;/button&gt;
  &lt;button class="menubutton" id="line_managers"&gt;Managers/Divisions&lt;/button&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  &lt;/div&gt;
  &lt;div style="float:right;"&gt;
  &lt;a href="line_managers_form.php" class="menubutton" id="add_line_managers"&gt;Add Managers/Divisions&lt;/a&gt;
  &lt;a href="academic_form.php" class="menubutton" id="add_academic"&gt;Add Academic&lt;/a&gt;
  &lt;a href="business_form.php" class="menubutton" id="add_business"&gt;Add Business/Suppport&lt;/a&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  &lt;/div&gt;
  &lt;div style="clear:both"&gt;&lt;/div&gt;
  
  
  &lt;div id="academic_list"&gt;
  &lt;h2&gt;Academic Entitlements&lt;/h2&gt;
  &lt;table class="dataTable" id="academic_table" cellpadding="2" cellspacing="2" width="100%"&gt;
  &lt;thead&gt;
  &lt;tr&gt;
  &lt;th&gt;Year&lt;/th&gt; 
  &lt;th&gt;Employee&lt;/th&gt;  
  &lt;th&gt;Division&lt;/th&gt;
  &lt;th&gt;Contract&lt;/th&gt;
  &lt;th&gt;Entitlement&lt;/th&gt;
  &lt;th&gt;Line Manager&lt;/th&gt;
  &lt;/tr&gt; 
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td colspan="4" class="dataTables_empty"&gt;Loading data from server&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div id="business_list" class="the_options" style="display:none;"&gt;
  &lt;h2&gt;Business &amp; Manual Entitlements&lt;/h2&gt;
  &lt;table class="dataTable" id="business_table" cellpadding="2" cellspacing="2" width="100%"&gt;
  &lt;thead&gt;
  &lt;tr&gt;
  &lt;th&gt;Year&lt;/th&gt; 
  &lt;th&gt;Employee&lt;/th&gt;  
  &lt;th&gt;FT/PT&lt;/th&gt;
  &lt;th&gt;Weekly Hours&lt;/th&gt;
  &lt;th&gt;Division&lt;/th&gt;
  &lt;th&gt;Commencement&lt;/th&gt;
  &lt;th&gt;Entitlement&lt;/th&gt;
  &lt;th&gt;Line Manager&lt;/th&gt;
  &lt;/tr&gt; 
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td colspan="4" class="dataTables_empty"&gt;Loading data from server&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="line_managers_list" class="the_options" style="display:none;"&gt;
  &lt;h2&gt;Line Managers &amp; Divisions&lt;/h2&gt;
  &lt;table class="dataTable" id="line_managers_table" cellpadding="2" cellspacing="2" width="100%"&gt;
  &lt;thead&gt;
  &lt;tr&gt;
  &lt;th&gt;Division&lt;/th&gt;
  &lt;th&gt;Name&lt;/th&gt;
  &lt;th&gt;Line Manager&lt;/th&gt;
  &lt;/tr&gt; 
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td colspan="4" class="dataTables_empty"&gt;Loading data from server&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>initialise Datatables</strong></p>
  
  <pre><code>$(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": '&lt;"top"iflp&lt;"clear"&gt;&gt;rt&gt;',
          "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": '&lt;"top"iflp&lt;"clear"&gt;&gt;rt&gt;',
          "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": '&lt;"top"iflp&lt;"clear"&gt;&gt;rt&gt;'
          });     
  
  });
  
  $(document).ready(function() {
  $(".the_options").hide();
  });
  </code></pre>
  
  <p><strong>Dialogs/datatables show/hide/open/close and AJAX save form:</strong></p>
  
  <pre><code>$(document).ready(dialogForms);
  function dialogForms() {
    $('a.menubutton').click(function() {
      var a = $(this);
      $.get(a.attr('href'),function(resp){
        var dialog = $('&lt;div&gt;').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();
              });
  
  });
  </code></pre>