Welcome 微信登录

首页 / 脚本样式 / JavaScript / 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