Question

Task: To delete records in db using ajax from a link in the table row, and maintain filters, sorting, pagination in the (awesome 🙂 DataTables jQuery plugin (link).

I would like the pagination to go to back if the last item on current page was successfully deleted, instead of showing the ‘No matching records found’ sort of message and a silly pagination info like ‘Showing 11 to 10 of 10 rows’

Answer 1

I’ll be taking from the step where you have your DataTables ready, with server-side data, filtering, pagination being done.

Steps:

• Add a delete link etc in your row, (possibly) coming from db.
• Upon triggering that link, do an ajax call to delete the row from db. For our purpose, we are only concerned with the success/failure of delete operation.
• In the success block of jQuery ajax call, we’ll:
  • get number of rows on current page before delete
  • if it’s 1, then we’ll get start of rows (iDisplayStart) for current page, and number of rows shown (iDisplayLength) currently. If their difference is >= 0, then we’ll use a small plugin to redraw the table (an ajax call), or a simple local delete of the row.
  • else, simply delete the row.

Code:

// delete user
$("a.deleteUser").live("click", function(e){
e.preventDefault();
var isDelete = confirm("Delete sub-user? This cannot be undone.");
if (isDelete == true){
    var uid = $(this).attr('uid');
    var i = $(this).attr('i');
    $.ajax({ 
        url: baseUrl + 'user/delete?uid=' + uid, 
        dataType:'json', 
        beforeSend: function() {
            listTable.fnProcessingIndicator();
        },
        success: function(response){
            if (response == 'SUCCESS'){
                var rowsOnThisPageBeforeDelete = listTable.fnGetData().length;

                if (rowsOnThisPageBeforeDelete == 1){
                    var numberOfRowsOnPage = listTable.fnSettings()._iDisplayLength;
                    var startOfRows = listTable.fnSettings()._iDisplayStart;
                    var newStartOfRows = startOfRows - numberOfRowsOnPage;

                    if (newStartOfRows >= 0){
                        listTable.fnDisplayStart(newStartOfRows);
                    }
                    else{
                        listTable.fnDeleteRow(i);
                    }
                }
                else{
                    listTable.fnDeleteRow(i);
                }                   
            }
            else{
                alert('Could not delete user. Try again later.');
            }
        },
        error: function(){
            alert('Could not delete user. Try again later.');
        },
        complete: function() {
            listTable.fnProcessingIndicator(false);
        },
    });
}
});

The plugin you need is http://datatables.net/plug-ins/api#fnDisplayStart . Kindly do some research (instructions in link also) as to how to use plugins with DataTables if you are new to it:

$.fn.dataTableExt.oApi.fnDisplayStart = function ( oSettings, iStart, bRedraw )
{
if ( typeof bRedraw == 'undefined' )
{
    bRedraw = true;
}

oSettings._iDisplayStart = iStart;
oSettings.oApi._fnCalculateEnd( oSettings );

if ( bRedraw )
{
    oSettings.oApi._fnDraw( oSettings );
}
};

// sample use:
/*
oTable.fnDisplayStart( 10 );
*/

References:

• http://datatables.net/forums/discussion/comment/4527#Comment_4527