我正在使用datatables和jquery对话框。 总的来说，我有3个表格和3个数据表。 我的脚本工作得很好，但我正在努力的事情就是在ajax save成功时更新正确的数据表（它甚至不必是正确的相应表，它可以更新3个表单保存中的任何3个表。 ）
任何指导将不胜感激。
带有按钮的页面，用于在对话框中显示数据表/表单
Academic Entitlements
Year Employee Division Contract Entitlement Line Manager Loading data from server
初始化数据表
$(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>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>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>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 = $('').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(); }); });
要更新表，只需在其上调用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 = $('').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; }