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不是基础的基础
Dec 24 Javascript
JavaScript使用cookie
Feb 02 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
JavaScript多线程详解
Aug 12 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
解决$store.getters调用不执行的问题
Nov 08 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/02/04 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
[01:46]新英雄登场
2019/09/10 DOTA
Python 用户登录验证的小例子
2013/03/06 Python
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
中学运动会广播稿
2014/01/19 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
2014年预算员工作总结
2014/12/05 职场文书
项目安全员岗位职责
2015/02/15 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
党员转正党支部意见
2015/06/02 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏