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实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
在JavaScript中使用timer示例
May 08 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 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高级OOP技术演示
2009/08/27 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
显示、隐藏密码
2006/07/01 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
详解jQuery事件
2017/01/13 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
Angularjs 事件指令详细整理
2017/07/27 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
python中的tcp示例详解
2018/12/09 Python
pytorch 模型可视化的例子
2019/08/17 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
如何真正的了解python装饰器
2020/08/14 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
幼儿园教师备课制度
2014/01/12 职场文书
幼儿园大班教学反思
2014/02/10 职场文书
2014信息公开实施方案
2014/02/22 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
如何在Python中妥善使用进度条详解
2022/04/05 Python