JQuery DataTable刪除行后的頁面更新利用Ajax解決

更新時間：2013年05月17日 17:07:07 作者：

使用Jquery的DataTable進行數(shù)據(jù)表處理非常方便，常遇到的一個問題就是刪除一行后頁面必須進行更新，下面與大家分享下使用Ajax的解決方法

使用Jquery的DataTable進行數(shù)據(jù)表處理非常方便，常遇到的一個問題就是刪除一行后頁面必須進行更新，需要注意的方法如下：前臺頁面中初始化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('刪除發(fā)生錯誤，請聯(lián)系管理員!'); 
} 
}, 
error: function() 
{ 
$.modal.alert('服務器無響應，請聯(lián)系管理員!'); 
} 
}); 

}, function() 
{ 
//$.modal.alert('Meh.'); 
}); 
}; 

其中只要是需要判斷一下當前頁中是否有數(shù)據(jù)，如果是最后一條的話，就在刪除后調(diào)用
$("#sorting-advanced").dataTable().fnPageChange( 'previous', true );已回到上一頁中
注意$("#sorting-advanced").dataTable().fnPageChange( 'previous'); 是不行的，必需進行刷新，否則頁面中顯示的iDisplayStart會從cookie中取得，還是刪除前的iDisplayStart

您可能感興趣的文章: