How to update the page after JQuery DataTable deletes a row (Ajax)

It is very convenient to use Jquery DataTable to process data tables. A common problem is that the page must be updated after a row is deleted. Note the following method: Pay attention when initializing the table on the front-end page:

[Javascript] var table = $ ('# sorting-advanced ');
Table. dataTable ({
'Bserverside': true,
'Sajaxsource': 'servlet/UserList <% = queryString %> ',
'Bprocessing': true, 'bstatesave ': true,
'Aocolumndefs ':[
{'Bsortable': false, 'argets': [0, 1, 6]}
],
'Backgroundtype': 'full _ numbers ',
'Sdom ':' <"dataTables_header" lfr> t <"dataTables_footer" ip> ',
'Fninitcomplete': function (oSettings)
{
// Style length select
Table. closest ('. ableables_wrapper'). find ('. dataTables_length select'). addClass ('select blue-gradient glossy'). styleSelect ();
TableStyled = true;
}
});

Var table = $ ('# sorting-advanced ');
Table. dataTable ({
'Bserverside': true,
'Sajaxsource': 'servlet/UserList <% = queryString %> ',
'Bprocessing': true, 'bstatesave ': true,
'Aocolumndefs ':[
{'Bsortable': false, 'argets': [0, 1, 6]}
],
'Backgroundtype': 'full _ numbers ',
'Sdom ':' <"dataTables_header" lfr> t <"dataTables_footer" ip> ',
'Fninitcomplete': function (oSettings)
{
// Style length select
Table. closest ('. ableables_wrapper'). find ('. dataTables_length select'). addClass ('select blue-gradient glossy'). styleSelect ();
TableStyled = true;
}
});
'Bstatesave ': true. This parameter must be set. In this way, you can retain 'bstatesave': true on the same page When deleting the returned result. This parameter must be set, in this way, the returned results can be deleted on the same page.

The deletion code is as follows:

[Javascript] function deleteConfirm (deleteID)
{
$. Modal. confirm ('Are you sure you want to delete this user? ', Function ()
{
$. Ajax ('servlet/user euser ',{
DataType: 'json ',
Data :{
UserID: deleteID
},
Success: function (data)
{
If (data. success = 'true ')
{
$. Modal. alert ('deleted successfully! ');
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 ('deletion error. Please contact the administrator! ');
}
},
Error: function ()
{
$. Modal. alert ('the server has no response. Please contact the administrator! ');
}
});

 
}, Function ()
{
// $. Modal. alert ('meh .');
});
};

Function deleteConfirm (deleteID)
{
$. Modal. confirm ('Are you sure you want to delete this user? ', Function ()
{
$. Ajax ('servlet/user euser ',{
DataType: 'json ',
Data :{
UserID: deleteID
},
Success: function (data)
{
If (data. success = 'true ')
{
$. Modal. alert ('deleted successfully! ');
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 ('deletion error. Please contact the administrator! ');
}
},
Error: function ()
{
$. Modal. alert ('the server has no response. Please contact the administrator! ');
}
});

}, Function ()
{
// $. Modal. alert ('meh .');
});
};

You only need to determine whether there is data on the current page. If it is the last one, it will be called after deletion.
$ ("# Sorting-advanced"). dataTable (). fnPageChange ('previous ', true); returned to the previous page

Note $ ("# sorting-advanced "). dataTable (). fnPageChange ('previous '); No. Refresh is required. Otherwise, the iDisplayStart displayed on the page will be obtained from the cookie or the iDisplayStart before deletion.