刷新datatable on Ajax成功 [英] Refresh datatable on Ajax success
本文介绍了刷新datatable on Ajax成功的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的脚本工作很好，但我正在努力的是在ajax save成功时更新正确的datatable（甚至不必是正确的对应表，它可以更新任何3表单保存。）
任何指导都将不胜感激。
具有显示按钮的页面在对话框中的数据/表单
< div style =float：left;>
< button class =menubuttonid =view_academic> Academic< / button>
< button class =menubuttonid =view_business> Business / Suppport< / button>
< button class =menubuttonid =line_managers>经理/部门< / button>
< br />
< br />
< / div>
< div style =float：right;>
< a href =line_managers_form.phpclass =menubuttonid =add_line_managers>添加管理者/部门< / a>
< a href =academic_form.phpclass =menubuttonid =add_academic>添加学术< / a>
< a href =business_form.phpclass =menubuttonid =add_business>添加业务/ Suppport< / a>
< br />
< br />
< / div>
< div style =clear：both>< / div>
< div id =academic_list>
< h2>学术授权< / h2>
< table class =dataTableid =academic_tablecellpadding =2cellspacing =2width =100％>
< thead>
< tr>
< th> Year< / th>
< th>员工< / th>
< th> Division< / th>
< th>合同< / th>
< th权利< / th>
< th>线路管理器< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td colspan =4class =dataTables_empty>从服务器加载数据< / td>
< / tr>
< / tbody>
< / table>
< / div>
< div id =business_listclass =the_optionsstyle =display：none;>
< h2>商业&手动授权< / h2>
< table class =dataTableid =business_tablecellpadding =2cellspacing =2width =100％>
< thead>
< tr>
< th> Year< / th>
< th>员工< / th>
th FT / PT第
< th< Weekly Hours< / th>
< th> Division< / th>
< th>开始< / th>
< th权利< / th>
< th>线路管理器< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td colspan =4class =dataTables_empty>从服务器加载数据< / td>
< / tr>
< / tbody>
< / table>
< / div>
< / div>
< div id =line_managers_listclass =the_optionsstyle =display：none;>
< h2>线路经理&部门< / h2>
< table class =dataTableid =line_managers_tablecellpadding =2cellspacing =2width =100％>
< thead>
< tr>
< th> Division< / th>
< th> Name< / th>
< th>线路管理器< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td colspan =4class =dataTables_empty>从服务器加载数据< / td>
< / tr>
< / tbody>
< / table>
< / div>
初始化数据
$（function（）{
//在HTML表格上实现dataTables插件
var $ acTable = $（＃academic_table）dataTable {
oLanguage：{
sSearch：Filter：
}，
bProcessing：true，
bServerSide：true，
sAjaxSource：scripts / academic_serverside.php，
iDisplayLength：10，
bJQueryUI：false，
sPaginationType：scrolling，
sDom：'<topiflp<clear>> rt>'，
sScrollX：100％，
sScrollXInner：100％，
bScrollCollapse：true
}）;
}）;
$（function（）{
//在HTML表上实现dataTables插件
var $ buTable = $（＃business_table）。dataTable（{
oLanguage ：{
sSearch：Filter：
}，
bProcessing：true，
bServerSide：true，
sAjaxSource /business_serverside.php，
iDisplayLength：10，
bJQueryUI：false，
sPaginationType：scrolling，
sDom：'&顶部iflp<clear>> rt>'，
sScrollX：100％，
sScrollXInner：100％，
bScrollCollapse
}）;
}）;
$（function（）{
//在HTML表格上实现dataTables插件
var $ lmTable = $（＃line_managers_table）。dataTable（{
oLanguage ：{
sSearch：Filter：
}，
bProcessing：true，
bServerSide：true，
sAjaxSource ，
iDisplayLength：10，
bJQueryUI：false，
sPaginationType：scrolling，
sDom：'<顶部iflp<clear>>>'
}）;
}）;
$（document）.ready（function（）{
$（。the_options）。hide（）;
}）;
对话框/数据表显示/隐藏/打开/关闭和AJAX保存窗体：
$（document）.ready（dialogForms）;
函数dialogForms（）{
$（'a.menubutton'）。click（function（）{
var a = $（this）;
$ .get attr（'href'），function（resp）{
var dialog = $（'< div>'）。attr（'id'，'formDialog'）。html（$（resp）形式：first'）。parent（'div'）。html（））;
$（'body'）。append（dialog）;
dialog.find（'：submit' ）;
dialog.dialog（{
title：a.attr（'title'）？a.attr（'title'）：''，
modal：true，
按钮：{
'保存'：function（）{
submitFormWithAjax（$（this）.find（'form'））;
$（this）.dialog（'close'）;
$ lmTable.fnDraw（''）;
}，
'取消'：function（）{$（this）.dialog（'close'）;}
}
close：function（）{$（this）.remove（）;}，
width：600，
height：500
}）;
} html'）;
retur n false;
}）;
}
function submitFormWithAjax（form）{
form = $（form）;
$ .ajax（{
url：form.attr（'action'），
data：form.serialize（），
type：（form.attr ）
dataType：'script'，
success：function（data）{
$（this）.dialog（'close'）;
$ lmTable.fnDraw（' '）;
}
}）;
返回false;
}
$（function（）{
$（＃add_academic）
.button（）
.click （）{
$（＃学术形式）对话框（open）;
}）;
$（＃add_line_managers）
.button（）
.click（function（）{
$（＃line-managers-form）。对话框（open）;
}）;
$（＃add_business ）
.button（）
.click（function（）{
$（＃business-form）。对话框（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; //保存点击按钮的ID
var a = $（this）;
$ .get（a.attr（'href'），function（resp）{
var对话框= $（'< div>'）。attr（'id'，'formDialog'）。html（$（resp）.find（'form：first'）。 ;
$（'body'）。append（dialog）;
dialog.find（'：submit'）hide（）;
dialog.dialog（{
title： a.attr（'title'）？a.attr（'title'）：''，
modal：true，
按钮：{
'保存'：function（）{
submitFormWithAjax（$（this）.find（'form'），id）; //将id传递给函数
function submitFormWithAjax（form，id）{
form = $ （form）;
var table_id;
//根据o选择要显示的表在id，我做了一些猜测，但调整这个
开关（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（）;
//隐藏所有表
$（ 'table'）。hide（）;
//显示刷新的
$（table_id）.show（）;
}
}）;
返回false;
}
I am using datatables and jquery dialog. Overall I have 3 forms and 3 datatables. My script is working great but the thing I am struggling with is updating the correct datatable on success of ajax save (It doesn't even have to be the correct corresponding table, it could update all 3 tables on any of the 3 form saves.)
Any guidance would be greatly appreciated.
Page with buttons for showing datatable/forms in 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>
initialise 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();
});
Dialogs/datatables show/hide/open/close and AJAX save 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();
});
});
解决方案
To update a table simply call fnDraw() on it. Since you are not using global variables, you must retrieve the table first
var $lmTable = $("#line_managers_table").dataTable( { bRetrieve : true } );
$lmTable.fnDraw();
EDIT - to show only the right table you could do something like:
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;
}
这篇关于刷新datatable on Ajax成功的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
