Home > Web Front-end > JS Tutorial > Page update after JQuery DataTable deletes rows using Ajax to solve_jquery

Page update after JQuery DataTable deletes rows using Ajax to solve_jquery

WBOY
Release: 2016-05-16 17:33:38
Original
1401 people have browsed it

It is very convenient to use Jquery's DataTable for data table processing. A common problem is that the page must be updated after deleting a row. The methods that need to be paid attention to are as follows: When initializing the table in the front page, pay attention to:

Copy code The code is as follows:

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, this must be set, so that it can remain on the same page when deleting and returning. 'bStateSave': true, this must be set, so that it can remain on the same page when deleting and returning.
The deleted code is as follows:
Copy code The code is as follows:

function deleteConfirm( deleteID)
{
$.modal.confirm('Are you sure you want to delete this user?', function()
{
$.ajax('servlet/DeleteUser', {
dataType : 'json',
data: {
userID: deleteID
},
success: function(data)
{
if (data.success =='true')
{
$.modal.alert('Delete 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 occurred, please contact the administrator!');
}
},
error: function()
{
$.modal.alert('The server is not responding, please contact the administrator!');
}
});

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

As long as you need to judge whether there is data in the current page, if it is the last one, Just call
$("#sorting-advanced").dataTable().fnPageChange( 'previous', true ); just after deletion; you have returned to the previous page
Note $("#sorting-advanced" ).dataTable().fnPageChange( 'previous'); is not possible. It must be refreshed. Otherwise, the iDisplayStart displayed on the page will be obtained from the cookie or the iDisplayStart before deletion.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template