Refresh datatable on Ajax success

Question

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

Answer 1

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 = $('
').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;
}