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 相关文章推荐
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 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_Flame(Version:Progress)的原代码
2006/10/09 PHP
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
PHP实现百度人脸识别
2019/05/06 PHP
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
详解vue 命名视图
2019/08/14 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
python web框架中实现原生分页
2019/09/08 Python
python列表推导式操作解析
2019/11/26 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
医生自荐信
2013/10/11 职场文书
股东协议书
2014/04/14 职场文书
捐助倡议书范文
2014/04/15 职场文书
体育口号大全
2014/06/18 职场文书
法制工作总结2015
2015/07/23 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis