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 相关文章推荐
事件模型在各浏览器中存在差异
Oct 20 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
20条学习javascript的编程规范的建议
Nov 28 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
详解CocosCreator消息分发机制
Apr 16 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
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
php获取参数的几种方法总结
2014/02/18 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
thinkphp分页实现效果
2016/10/13 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
python 构造三维全零数组的方法
2018/11/12 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
python 错误处理 assert详解
2020/04/20 Python
Python ellipsis 的用法详解
2020/11/20 Python
致共产党员倡议书
2014/04/16 职场文书
好听的队名和口号
2014/06/09 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
英文升职感谢信
2015/01/23 职场文书
逃课检讨书
2015/01/26 职场文书
歌咏比赛主持词
2015/06/29 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
入党心得体会
2019/06/20 职场文书
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电