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写的分页表格数据为json串
Feb 18 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
简单的JS轮播图代码
Jul 18 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
vue按需加载实例详解
Sep 06 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 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设计模式 Observer(观察者模式)
2011/06/26 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
javascript concat数组累加 示例
2009/09/03 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
Python使用MD5加密字符串示例
2014/08/22 Python
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
python绘制趋势图的示例
2020/09/17 Python
python中uuid模块实例浅析
2020/12/29 Python
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
求职简历推荐信范文
2013/12/02 职场文书
三年级音乐教学反思
2014/01/28 职场文书
大专生自荐书范文
2014/06/22 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
导游词之河北邯郸
2019/09/12 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL