Suppose i am in 3rd page of datatable, and delete a row of datatable, and redraw the data table, it is coming back to 1st page. But i want to be in 3rd page. This is my code, Once i delete the row from datatable, it comes to first page.

I am using jQuery v1.11.2

var oTable = $('#alluserlist').dataTable();  
oTable.fnDeleteRow(oTable.fnGetPosition(row, null, false));

Suppose i am in 3rd page of datatable, and delete a row of datatable, and redraw the data table, it is coming back to 1st page. But i want to be in 3rd page. This is my code, Once i delete the row from datatable, it comes to first page.

I am using jQuery v1.11.2

var oTable = $('#alluserlist').dataTable();  
oTable.fnDeleteRow(oTable.fnGetPosition(row, null, false));

• javascript
• jquery
• datatables

• 1 Have checked this Example – Hamza Abdaoui Commented Feb 5, 2018 at 7:57
• Hello and welcome to StackOverflow. Please take some time to read the help page, especially the sections named "What topics can I ask about here?" and "What types of questions should I avoid asking?". And more importantly, please read the Stack Overflow question checklist. You might also want to learn about Minimal, Complete, and Verifiable Examples. – Clijsters Commented Feb 5, 2018 at 8:03
• Possible duplicate of How to reload/refresh jQuery dataTable? – Erik Kalkoken Commented Feb 5, 2018 at 8:14
• 1 Duplicate? The answer in the link deals with loading DataTables with ajax, this question has nothing to do with ajax? – lofihelsinki Commented Feb 6, 2018 at 6:27

3 Answers 3

When using DataTables > 1.10 API, you can pass false to draw() to disable re-paging

var table = $('#alluserlist').DataTable();
table.row( this ).remove().draw( false );

Documentation here false - the ordering and search will be recalculated and the rows redrawn in their new positions. The paging will not be reset - i.e. the current page will still be shown.

        $(document).ready(function() {
        $('#table_id').DataTable( {
            stateSave: true
        } );
    });

Anyone who are using jQuery DataTables and wants to perform tasks e.g. reload the page, or edit, delete, will face a problem to lose the current page and navigate to 1st page, this snippet will help him to stay on the same page, It avoids to return from current page to first page.

If you find compatibility problems using the .draw(false);, maybe it will be necessary to use a script to iterate the page elements, store the paging, change what you need, draw() the table and then click on each page link. One way could be something like this (using jquery):

    //storing the dataTable paging 
    async function storePaging (){
    let lnks=[];
    await $('.paginate_button').each(function(i, obj){
        //iterates the '.paginate_button' elements (responsible for paging) 
        classe = $(this).attr("class");
        ariaControls = $(this).attr("aria-controls");
        dataDtIdx = $(this).attr("data-dt-idx");  
        //use the indexOf only if you have lots of dataTables into your page and want to specify some of it
        if (classe == "paginate_button current" && ariaControls.indexOf("tableId") > -1){
            lnks.push({classe:classe, ariaControls:ariaControls, dataDtIdx:dataDtIdx})
        }
    });
    return lnks;
}


 //iterates (each) on paging elements and click 
async function clickTablesPaging(lnks){
    await $('.paginate_button').each(function(i, obj){
         //separates each value
        classe = $(this).attr("class");
        ariaControls = $(this).attr("aria-controls");
        dataDtIdx = $(this).attr("data-dt-idx");
       //iterates stored paging and click
        for (let elm of lnks){
           if ((classe == "paginate_button current" || classe==("paginate_button ")) && ariaControls == elm.ariaControls && Number(dataDtIdx)==elm.dataDtIdx){ 
               $(this).click();
           }
        }
    });
}

To use those functions you need just call them on the sequence bellow:

let pgs = await storePaging();
//draw the dataTable
await table.draw(); 
clickTablesPaging(pgs);