表单 – 在Ajax成功时刷新数据表

我正在使用datatables和 jquery对话框.总的来说,我有3个表格和3个数据表.
我的脚本工作得很好,但我正在努力的事情就是在ajax save成功时更新正确的数据表(它甚至不必是正确的相应表,它可以更新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:"
        },"sAjaxSource": "scripts/business_serverside.php","bScrollCollapse": true
        });     

});
$(function() {
    // Implements the dataTables plugin on the HTML table
    var $lmTable= $("#line_managers_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },"sAjaxSource": "scripts/line_managers_serverside.php","sDom": '<"top"iflp<"clear">>rt>'
        });     

});

$(document).ready(function() {
$(".the_options").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();
            });

});

解决方法

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

（编辑：南平站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!