How to stay on the active page in jquery DataTable

Question

I have several data listed on the jquery dataTable and its done pagination by the DataTable plugins default. I want to get the current page of the dataTable while processing the data and set that page into active after the action is processed and reload the data.

Solution 1

See this fiddle. You can see how to get the current pages. In the JSFiddle you can try refresh browser. Example let say the current page now is 3. When you refresh the browser, you still in page 3.

To solve your problem want to go back to the last page when editing or deleting row, u must use this option to make jquery datatable remember where the last page. Jquery Datatable will save the state of a table (its paging position, ordering state etc). The state saving method uses the HTML5 localStorage and sessionStorage APIs for efficient storage of the data. See this link to read more detail about it. State saving

"bStateSave": true

JSFiddle Link

Fiddle Demo

Javascript code

$(document).ready(function() {
    var table = $('#example').DataTable({
        "sPaginationType": "full_numbers",
        "bStateSave": true
    });

    $("#example").on('page.dt', function () {
    var info = table.page.info();
        $('#pageInfo').html('Currently showing page ' + (info.page + 1) + ' of ' + info.pages + ' pages.');
    });
} );

Solution 2

Use only stateSave: true

like this:

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

Solution 3

Copied from Datatable

var table = $('#example').DataTable( {
    ajax: "data.json"
} );

setInterval( function () {
    table.ajax.reload( null, false ); // user paging is not reset on reload
}, 30000 );

Pass null, false on reload function to stay on that page while reloading the table. See ajax.reload() documentation for more information.

Solution 4

See the dataTables documentation which provides a call back function from which you can obtain the current page:

$('#example').dataTable( {
  "drawCallback": function( settings ) {
       var api = new $.fn.dataTable( settings );

        // Output the data for the visible rows to the browser's console
        // You might do something more useful with it!
        console.log( api.rows( {page:'current'} ).data() );
    }
});

View more solutions

Comments

[Hafiz Siddiq]

Thanks for the suggestion