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的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
用jscript实现新建word文档
Jun 15 Javascript
JavaScript实用技巧(一)
Aug 16 Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 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
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
DWZ刷新dialog解决方法
2013/03/03 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
金融行业务员的自我评价
2013/12/13 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
中秋节活动总结
2014/08/29 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
2015年班组工作总结
2015/04/20 职场文书
地心历险记观后感
2015/06/15 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
详解Redis瘦身指南
2021/05/26 Redis
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle