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


Posted in Javascript onMay 17, 2013

使用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
Javascript 相关文章推荐
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
Vue源码探究之状态初始化
Nov 14 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 #Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 #Javascript
javascript检测页面是否缩放的小例子
May 16 #Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 #Javascript
js如何获取file控件的完整路径具体实现代码
May 15 #Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 #Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 #Javascript
You might like
简单实用的网站PHP缓存类实例
2014/07/18 PHP
php简单分页类实现方法
2015/02/26 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
Date对象格式化函数代码
2010/07/17 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
利用node.js开发cli的完整步骤
2020/12/29 Javascript
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
python实现备份目录的方法
2015/08/03 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
python生成二维码的实例详解
2017/10/29 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
python中的tcp示例详解
2018/12/09 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
django 中QuerySet特性功能详解
2019/07/25 Python
浅谈Python协程
2020/06/17 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
团日活动总结书
2014/05/08 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
安全负责人任命书
2014/06/06 职场文书
开发房地产协议书
2014/09/14 职场文书
教师思想工作总结2015
2015/05/13 职场文书
信用卡工作证明范本
2015/06/19 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
Github 使用python对copilot做些简单使用测试
2022/04/14 Python