JQuery DataTable删除行后的页面更新利用Ajax解决
更新时间：2013年05月17日 17:07:07 作者：
使用Jquery的DataTable进行数据表处理非常方便，常遇到的一个问题就是删除一行后页面必须进行更新，下面与大家分享下使用Ajax的解决方法
使用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
复制代码 代码如下:
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
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了jQuery 筛选器简单操作,结合实例形式详细分析了jQuery筛选器针对元素、字符串、属性等操作常见技巧与操作注意实行,需要的朋友可以参考下2019-10-10
最近有小伙伴咨询Jquery对象和Dom对象的区别，今天我们谈谈个人对于Jquery对象和Dom对象的区别的理解，如有遗漏或者错误还请指出。2014-11-11
ScrollToFixed (jquery Fixed plugin)能够让网页的导航或表头等固定在顶部或底部，让用户更方便的操作或查看信息。除了导航和表头，也可以固定其他内容，比如广告、返回顶部等等。2015-04-04
这篇文章主要介绍了jQuery插件dataTables添加序号列的方法的相关资料,需要的朋友可以参考下2016-07-07
这篇文章主要介绍了jQuery HTML css()方法与css类,结合实例形式详细分析了jQuery HTML css()方法与css类相关函数用法与操作注意事项,需要的朋友可以参考下2020-05-05
这篇文章主要是对jquery ajax 局部刷新的小案例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了 jQuery实现每日秒杀商品倒计时功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
下面小编就为大家分享一篇jquery动态添加带有样式的HTML标签元素方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了jquery操作select元素和option的实例代码，感兴趣的小伙伴们可以参考一下2016-02-02
工作快一年了,最近学习jquery，对jquery很感兴趣。第一次写博客，有不足之处还请各位拍砖。2011-04-04
最新评论