Ich benutze Datatables und Jquery-Dialog. Insgesamt habe ich 3 Formulare und 3 Datentabellen. Mein Skript funktioniert prima, aber ich habe Probleme damit, die korrekte Datentabelle zu aktualisieren, wenn das Speichern von Ajax erfolgreich war (es muss nicht einmal die richtige entsprechende Tabelle sein, sondern es können alle 3 Tabellen in einem der 3 gespeicherten Formulare aktualisiert werden. )

Jede Anleitung wäre sehr dankbar.

Seite mit Schaltflächen zum Anzeigen von Daten / Formularen im 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>

initialisieren Sie 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();
});

Dialoge / Datentabellen zeigen / verbergen / öffnen / schließen und AJAX speichern 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();
            });

});