Forms 刷新Ajax成功的数据表

我正在使用datatables和jquery对话框。总的来说，我有3个表单和3个数据表。 我的脚本工作得很好，但我正在努力在ajax保存成功后更新正确的数据表（它甚至不必是正确的对应表，它可以在3个表单保存中的任何一个上更新所有3个表）

任何指导都将不胜感激

带有用于在对话框中显示数据表/表单的按钮的页面

<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>

学术的
业务/支持
经理/部门








学术权利
年
雇员
分部
合同
权利
部门经理
从服务器加载数据
业务和手册权利
年
雇员
英尺/磅
每周工作时间
分部
毕业典礼
权利
部门经理
从服务器加载数据
直线经理和部门
分部
名称
部门经理
从服务器加载数据

初始化数据表

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

$（函数（）{
//在HTML表上实现dataTables插件
变量$acTable=$（“#学术#U表”）。数据表（{
“语言”：{
“sSearch”：“筛选器：”
},
“bProcessing”：正确，
“bServerSide”：正确，
“sAjaxSource”：“scripts/academical_serverside.php”，
“iDisplayLength”：10，
“bJQueryUI”：错，
“sPaginationType”：“滚动”，
“sDom”：“rt>”，
“sScrollX”：“100%”，
“sScrollXInner”：“100%”，
“崩溃”：真
});     
});
$（函数（）{
//在HTML表上实现dataTables插件
变量$buTable=$（“#业务_表”）。数据表（{
“语言”：{
“sSearch”：“筛选器：”
},
“bProcessing”：正确，
“bServerSide”：正确，
“sAjaxSource”：“scripts/business_serverside.php”，
“iDisplayLength”：10，
“bJQueryUI”：错，
“sPaginationType”：“滚动”，
“sDom”：“rt>”，
“sScrollX”：“100%”，
“sScrollXInner”：“100%”，
“崩溃”：真
});     
});
$（函数（）{
//在HTML表上实现dataTables插件
var$lmTable=$（“#行#管理器#表”）。数据表（{
“语言”：{
“sSearch”：“筛选器：”
},
“bProcessing”：正确，
“bServerSide”：正确，
“sAjaxSource”：“scripts/line\u managers\u serverside.php”，
“iDisplayLength”：10，
“bJQueryUI”：错，
“sPaginationType”：“滚动”，
“sDom”：“rt>”
});     
});
$（文档）.ready（函数（）{
$（“.theu选项”）.hide（）；
});

对话框/数据表显示/隐藏/打开/关闭和AJAX保存表单：

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

});

$（文档）.ready（dialogForms）；
函数dialogForms（）{
$（'a.menubutton'）。单击（函数（）{
var a=$（本）；
$.get（a.attr（'href'），函数（resp）{
var dialog=$（''）.attr（'id'，'formDialog'）.html（$（resp）.find（'form:first'）.parent（'div'）.html（））；
$（'body'）。追加（对话框）；
dialog.find（':submit'）.hide（）；
对话({
标题：a.attr（'title'）？a.attr（'title'）：“”，
莫代尔：是的，
按钮：{
“保存”：函数（）{
submitFormWithAjax（$（this.find（'form'））；
$（this.dialog（'close'）；
$lmTable.fnDraw（“”）；
},
“取消”：函数（）{$（this）.dialog（'close'）；}
},
关闭：函数（）{$（this）.remove（）；}，
宽度：600，
身高：500
});
}","html";；
返回false；
});
}
函数submitFormWithAjax（表单）{
表格=$（表格）；
$.ajax({
url:form.attr（'action'），
数据：form.serialize（），
类型：（form.attr（'method'）），
数据类型：“脚本”，
成功：功能（数据）{
$（this.dialog（'close'）；
$lmTable.fnDraw（“”）；
}
});
返回false；
}
$（函数（）{
$（“#添加#学术”）
.按钮（）
。单击（函数（）{
$（“#学术形式”）。对话框（“打开”）；
});
$（“#添加#行#经理”）
.按钮（）
。单击（函数（）{
$（“#直线经理表单”）。对话框（“打开”）；
});
$（“添加业务”）
.按钮（）
。单击（函数（）{
$（“#业务表单”）。对话框（“打开”）；
});
$（“查看学术”）
.按钮（）
。单击（函数（）{
$（“#学术列表”）.show（）；
$（“#业务列表”）.hide（）；
$（“#行管理器列表”）.hide（）；
});
$（“查看业务”）
.按钮（）
。单击（函数（）{
$（“#学术列表”）.hide（）；
$（“#业务列表”）.show（）；
$（“#行管理器列表”）.hide（）；
});
$（“直线经理”）
.按钮（）
。单击（函数（）{
$（“#学术列表”）.hide（）；
$（“#业务列表”）.hide（）；
$（“#行管理者列表”）.show（）；
});
});

要更新表格，只需在表格上调用

fnDraw（）

。因为您没有使用全局变量，所以必须首先检索表

var $lmTable = $("#line_managers_table").dataTable( { bRetrieve : true } );
$lmTable.fnDraw();

编辑-要仅显示正确的表格，可以执行以下操作：

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;
}

函数dialogForms（）{
$（'a.menubutton'）。单击（函数（）{
var id=this.id；//保存单击按钮的id
var a=$（本）；
$.get（a.attr（'href'），函数（resp）{
var dialog=$（''）.attr（'id'，'formDialog'）.html（$（resp）.find（'form:first'）.parent（'div'）.html（））；
$（'body'）。追加（对话框）；
dialog.find（':submit'）.hide（）；
对话({
标题：a.attr（'title'）？a.attr（'title'）：“”，
莫代尔：是的，
按钮：{
“保存”：函数（）{
submitFormWithAjax（$（this）.find（'form'），id）；//将id传递给函数
函数submitFormWithAjax（表单，id）{
表格=$（表格）；
var表id；
//根据需要选择要显示的表