How to redraw the data table without losing the current page

Question

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));

Have checked this [Example](https://datatables.net/examples/api/select_single_row.html) — Hamza Abdaoui, Feb 05 '18 at 07: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?"](http://stackoverflow.com/help/on-topic) and ["What types of questions should I avoid asking?"](http://stackoverflow.com/help/dont-ask). And more importantly, please read [the Stack Overflow question checklist](http://meta.stackexchange.com/q/156810/204922). You might also want to learn about [Minimal, Complete, and Verifiable Examples](http://stackoverflow.com/help/mcve). — Clijsters, Feb 05 '18 at 08:03
Possible duplicate of [How to reload/refresh jQuery dataTable?](https://stackoverflow.com/questions/12934144/how-to-reload-refresh-jquery-datatable) — Erik Kalkoken, Feb 05 '18 at 08:14
Duplicate? The answer in the link deals with loading DataTables with ajax, this question has nothing to do with ajax? — lofihelsinki, Feb 06 '18 at 06:27

score 16 · Answer 1 · answered Feb 05 '18 at 13:16

16

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.

answered Feb 05 '18 at 13:16

lofihelsinki

2,491
2
23
35

Thanks lofihelsinki, I got my mistake, I have called the datatable function in a wrong way , it should be DataTable(), but i declared as dataTable(); – Manas Sahoo Feb 06 '18 at 07:25

shubham kumar · Answer 2 · 2019-07-22T08:43:35.473

2

        $(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.

edited Jul 22 '19 at 08:43

answered Jul 18 '19 at 08:45

shubham kumar

91
1
2

2

Welcome to SO. Please could you explain to users why this is the answer. – Mike Poole Jul 18 '19 at 08:51
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. – shubham kumar Jul 20 '19 at 07:33

score 0 · Answer 3 · answered Feb 23 '23 at 17:44

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);

How to redraw the data table without losing the current page

3 Answers3

Linked