How to stay on the active page in jquery DataTable

2
votes

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.

5
javascriptjquerydatatablesjquery-datatables
are you sure you will get the same set of data back after the action is processed? – Vim
yes same set of data but the particular row data will be changed after processing – Raja Manickam
What you mean exactly by Processing data ? – CodeWithCoffee
Processing means doing the actions like editing, deleting, completing,... etc – Raja Manickam

5 Answers

9
votes

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.');
    });
} );
3
votes

Use only stateSave: true

like this:

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

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() );
    }
});
1
votes

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.

0
votes

Add this where you are initializing datatable

"drawCallback": function( settings ) {
      alert ( 'You are on ssame page' );
}

It works for me :)