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 相关文章推荐
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 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获取bing每日壁纸示例分享
2014/02/25 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
Python自定义一个异常类的方法
2019/06/27 Python
Python jieba库用法及实例解析
2019/11/04 Python
python和php学习哪个更有发展
2020/06/17 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
python通过cython加密代码
2020/12/11 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
人力资源专员岗位职责
2014/01/30 职场文书
爱国主义电影观后感
2015/06/18 职场文书
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏
Java数据结构之堆(优先队列)
2022/05/20 Java/Android