Use Ajax to update the page after JQuery DataTable deletes rows

Source: Internet
Author: User

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: Copy codeThe Code is as follows: 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::Copy codeThe Code is as follows: 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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.