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使用手册之二 DOM操作
Mar 24 Javascript
用javascript实现画板的代码
Sep 05 Javascript
Javascript 判断Flash是否加载完成的代码
Apr 12 Javascript
brook javascript框架介绍
Oct 10 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
token 机制和实现方式
Dec 15 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 数据结构 算法 三元组 Triplet
2011/07/02 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
php文件下载处理方法分析
2015/04/22 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
IE8 原生JSON支持
2009/04/13 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
jQuery功能函数详解
2015/02/01 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
深入理解vue中的$set
2017/06/01 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
全面分析Python的优点和缺点
2018/02/07 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
python仿抖音表白神器
2019/04/08 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
房产转让协议书
2014/04/11 职场文书
作风转变心得体会
2014/09/02 职场文书
银行业务授权委托书
2014/10/10 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript