我正在使用datatables和
jquery对话框.总的来说,我有3个表格和3个数据表.
我的脚本工作得很好,但我正在努力的事情就是在ajax save成功时更新正确的数据表(它甚至不必是正确的相应表,它可以更新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();
});
$(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();
});
});
解决方法
要更新表,只需在其上调用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'),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'),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;
}
