Refresh a DataTable without Losing Your Current Page

Refresh a DataTable without Losing Your Current Page. In jQuery dataTable we may have to work with large volume of data’s through server side processing and handling large datas is not so easy to work through dataTable. When we are doing edit or delete actions to a row of data. We need to refresh or redraw the table to see the changes.

On the case, we may be in the middle of the page. But after refreshing the dataTable it will move to the first page of the datatable. So it’s a little complicated to seek and find the page and the content where we left before.
Here the below code helps you to perform the paginate after reloading the dataTable.

Just copy the below code and add it a file and hook it with the page where you working now.

$.fn.dataTableExt.oApi.fnStandingRedraw = function(oSettings) {
    //redraw to account for filtering and sorting
    // concept here is that (for client side) there is a row got inserted at the end (for an add)
    // or when a record was modified it could be in the middle of the table
    // that is probably not supposed to be there - due to filtering / sorting
    // so we need to re process filtering and sorting
    // BUT - if it is server side - then this should be handled by the server - so skip this step
    if(oSettings.oFeatures.bServerSide === false){
        var before = oSettings._iDisplayStart;
        oSettings.oApi._fnReDraw(oSettings);
        //iDisplayStart has been reset to zero - so lets change it back
        oSettings._iDisplayStart = before;
        oSettings.oApi._fnCalculateEnd(oSettings);
    }
      
    //draw the 'current' page
    oSettings.oApi._fnDraw(oSettings);
};

The above we wrote a small plugin to perform the operations of drawing the right page after reload. But we need to use the ” fnStandingRedraw” instead of the fnDraw.

oTable1.fnStandingRedraw();

Try save the code and try it. If you have any problem or bug while using this code. Drop your comments below.