jQuery DataTable : Delete row and reload

Question

Now, I am working with jQuery DataTable. Everything is going well in intializing data tables with javascript data array.

In my table, it included remove row button. When I clicked the Remove button of each row, I delete record using following function.

function removeRow(itemList, recordIndex){
    itemList.splice(recordIndex, 1);

    dataTable.clear();
    dataTable.rows.add(itemList);
    dataTable.columns.adjust().draw(false);
}

This function performed well with no error. At that, I set false to draw() function to prevent going to first page when delete records in any other page.This one also working for me.

The problem is, when my itemList has 11 records, and I go to second page of data table and delete the 11th record.

So, my itemList will left only 10 record and My data table should show the first page of paging.

But, jQuery data table is not doing that. It still have in second page with no records.

I don't know how to fix that one. I want to show previous page after delete every records from current page.

I know `draw()`` function without false parameter will go to first page. But it go to first page in every deletion.

I only want to go to previous page, when I deleted all records from current page.

Please, help me. Thanks.

Louys Patrice Bessette · Accepted Answer · 2016-10-30 19:01:07Z

I found an hacky way to get the previous pagination when the current has been emptied.
It is specific to jQuery DataTable, since using it's class naming.

Try it in CodePen.

function removeRow(recordIndex){

    // Get previous pagination number
    var previousPagination= parseInt( $(document).find(".paginate_button.current").data("dt-idx") ) -1;

    // Splice the data.
    data.splice(recordIndex,1);
    myTable.clear();
    myTable.rows.add(data);
    myTable.columns.adjust().draw(false);   // May ajust the pagination as empty... `.draw(false)` is needed.

    // Decide to redraw or not based on the presence of `.deleteBtn` elements.
    var doIdraw=false;
    if($(document).find(".deleteBtn").length==0){
        doIdraw=true;
    }
    myTable.columns.adjust().draw(doIdraw); // Re-draw the whole dataTable to pagination 1

    // If the page redraws and a previous pagination existed (except the first)
    if(previousPagination>1 && doIdraw){
        var previousPage = $(document).find("[data-dt-idx='" + previousPagination + "']").click();
    }

    // Just to debug... Console.log the fact that only one pagination is left. You can remove that.
    if(previousPagination==0 && doIdraw){
    }
}

Notice that I used:

#myTable as the table id
.deleteBtn as the delete buttons class
data as the dataTable data

I removed all console.log() and example related code in the code above (but not in CodePen).

"Delete this →" button handler is:

$("#myTable").on("click",".deleteBtn",function(){

    var rowElement = $(this).closest("tr");
    var rowIndex = myTable.row(rowElement).index();
    removeRow(rowIndex);
});

Collectives™ on Stack Overflow

jQuery DataTable : Delete row and reload

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related