How to navigate to previous page when removing the last element of any other page

goyocasero

Hi.
We have a server-side datatable loaded with ajax requests. We have one button to add a row (which refreshes the datatable accordingly) and another button in each row to remove it.
When we remove the element we call the following function:

    $.ajax({
        dataType: 'json',
        contentType: "application/json;charset=UTF-8",
        type: 'POST',
        url: 'ajaxDelete.json?itemId='+id
    }).done(function(data, textStatus, jqXHR) {
        if(data.status == "200") {
            $("#elementTable").DataTable().draw(false);
            $(".sucessDelete").show();
        } 
    });

The problem comes when the removed element is the last one on that page. The table is redrawn and it remains on the same page (because of the false argument when calling to the draw function). As it was the last one, the page is empty and the bottom info says "Showing elements from 11 to 10 of 10". We'd like the table to automatically navigate to the previous page.
We've tried to use draw() (with the default true), but this makes the datatables to navigate always to the first page, and we don't want that when it's not necessary.

What should we do?

colin

Hi @goyocasero ,

I can see that's a problem! One thing you could do is to call page.info(). You could use the information returned in that structure to either issue the .draw(false), or to change the page to the previous page (or the first if you prefer).

Hope that helps,

Cheers,

Colin

goyocasero

Ok. That's what I'd thought to do, but I was expecting datatables lib to have any way to configure that...

goyocasero

By the way. Yesterday, when searching for the solution, I found this closed post, which I think that is asking the same question. Maybe you should link to this one or something:

colin

Hi @goyocasero ,

Thanks for that, and yep, good suggestion, all linked...

Cheers,

Colin

goyocasero

We have made a function that should be called instead of the .draw(false), after the removing of an element. I share here for you, just in case anyone else would need it:

function redrawAfterDelete(tableToRedraw) {
    var info = tableToRedraw.page.info();

    if (info.page > 0) { 
        // when we are in the second page or above
        if (info.recordsTotal-1 > info.page*info.length) {
            // after removing 1 from the total, there are still more elements
            // than the previous page capacity  
            tableToRedraw.draw( false )
        } else {
            // there are less elements, so we navigate to the previous page
            tableToRedraw.page( 'previous' ).draw( 'page' )
        }
    }
}

Please, feel free to correct or improve it