教程集 www.jiaochengji.com
教程集 >  jQuery  >  jquery 教程  >  正文 JQuery DataTable删除行后的页面更新利用Ajax解决

JQuery DataTable删除行后的页面更新利用Ajax解决

发布时间:2014-01-11   编辑:jiaochengji.com
使用Jquery的DataTable进行数据表处理非常方便,常遇到的一个问题就是删除一行后页面必须进行更新,下面与大家分享下使用Ajax的解决方法
使用jquery的DataTable进行数据表处理非常方便,常遇到的一个问题就是删除一行后页面必须进行更新,需要注意的方法如下:前台页面中初始化table时注意:
复制代码 代码如下:

var table = $('#sorting-advanced');
table.dataTable({
'bServerSide': true,
'sAjaxSource': 'servlet/UserList<%=queryString%>',
'bProcessing': true, 'bStateSave': true,
'aoColumnDefs': [
{ 'bSortable': false, 'aTargets': [0,1,6]}
],
'sPaginationType': 'full_numbers',
'sDom': '<"dataTables_header"lfr>t<"dataTables_footer"ip>',
'fnInitComplete': function( oSettings )
{
// Style length select
table.closest('.dataTables_wrapper').find('.dataTables_length select').addClass('select blue-gradient glossy').styleSelect();
tableStyled = true;
}
});

'bStateSave': true, 这个必须设置,这样就可以在删除返回时,保留在同一页上'bStateSave': true, 这个必须设置,这样就可以在删除返回时,保留在同一页上
删除的代码如下:
复制代码 代码如下:

function deleteConfirm(deleteID)
{
$.modal.confirm('确实要删除此用户吗?', function()
{
$.ajax('servlet/DeleteUser', {
dataType : 'json',
data: {
userID: deleteID
},
success: function(data)
{
if (data.success =='true')
{
$.modal.alert('删除成功!');
start = $("#sorting-advanced").dataTable().fnSettings()._iDisplayStart;
total = $("#sorting-advanced").dataTable().fnSettings().fnRecordsDisplay();
window.location.reload();
if((total-start)==1){
if (start > 0) {
$("#sorting-advanced").dataTable().fnPageChange( 'previous', true );
}
}
}
else
{
$.modal.alert('删除发生错误,请联系管理员!');
}
},
error: function()
{
$.modal.alert('服务器无响应,请联系管理员!');
}
});

}, function()
{
//$.modal.alert('Meh.');
});
};

其中只要是需要判断一下当前页中是否有数据,如果是最后一条的话,就在删除后调用
$("#sorting-advanced").dataTable().fnPageChange( 'previous', true );已回到上一页中
注意$("#sorting-advanced").dataTable().fnPageChange( 'previous'); 是不行的,必需进行刷新,否则页面中显示的iDisplayStart会从cookie中取得,还是删除前的iDisplayStart

您可能感兴趣的文章:
JQuery DataTable删除行后的页面更新利用Ajax解决
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
jQuery Ajax请求状态管理器打包
多个datatable共存造成多个表格的checkbox都被选中
Delete与Remove删除Datatable行的区别
Python3爬虫入门:Ajax是什么
DataTable使用技巧 与简介
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
PHP新手入门你需要了解些什么?

关键词: DataTable  删除行   
[关闭]
~ ~