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获取当前元素索引值用法实例
Jun 10 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
js中arguments对象的深入理解
May 14 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 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中大括号作用介绍
2012/03/22 PHP
php无限极分类实现方法分析
2019/07/04 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
如何通过python实现全排列
2020/02/11 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
公务员培训自我鉴定
2013/09/19 职场文书
应届生幼儿园求职信
2013/11/12 职场文书
环境工程毕业生自荐信
2013/11/17 职场文书
日语专业毕业生求职信
2013/12/04 职场文书
创意活动策划书
2014/01/15 职场文书
元旦获奖感言
2014/03/08 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
工作收入证明模板
2015/06/12 职场文书
校运会通讯稿
2015/07/18 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书