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的相对父元素和相对文档定位示例代码
Aug 02 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
JS猜数字游戏实例讲解
Jun 30 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
PHP 日常开发小技巧
2009/09/23 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python获取央视节目单的实现代码
2015/07/25 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
Python实现字典依据value排序
2016/02/24 Python
python rsa 加密解密
2017/03/20 Python
Python绘制3D图形
2018/05/03 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
家庭户外服装:Hawkshead
2017/11/02 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
护士自我鉴定总结
2014/03/24 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
2019求职信大礼包
2019/05/15 职场文书
浅谈Python魔法方法
2021/06/28 Java/Android
HTML中的表单元素介绍
2022/02/28 HTML / CSS