Save The Last Page Number After Sorting Column In Jquery Datatable

Question

I am using jquery datatable to show data. I customize the paging function. For example each page has 10 record. First my function take 10 records. If user click next button then my function take more than 10 records. If user click 'previous' button and then my function save last page. Because if user click 'next' button then same records are not pull again. Existing records are shown. Thus the same records don't occur. But if the user never clicked the back button. And for example on page 3, if user sort coloumn and then table show first page with out saving last page number. So that if user click next button, after that same records will be fetch one more time. And same records wiil be shown on table. So that i must save last page number after sorting coloumn in jquery table. I searched this problem to find solution. I find solutions only like as below:

$('#example').dataTable( {
  stateSave: true
} );

How can i save last page number, after coloumn sorting (because of showing first page). And how can i store this last page number on variable to use when i fetch data from server.

Answer 1

The following example will add the current page and the previous page numbers to the request parameters sent to your server.

$(document).ready(function() {    
    //vars        
    var previousPage = null;

    // DataTable
    var table = $('#example').DataTable( {
        "serverSide": true,
        "ajax": {
            "url": "yourAjaxDataSource.url",
            "type": "POST",
            "data": function ( dtData ) {
                        var info = $('#example').DataTable().page.info();
                        var currentPage = info.page + 1;        
                        var customData = $.extend( {}, dtData, {
                                            "currentPage": currentPage,
                                            "previousPage ": previousPage 
                                          } );
                        return  customData;
                    }
        },
        "columns": [
            {//1st Column: 
                "data": "foo" },
            {//2nd Column: 
                "data": "bar" }
        ],

        //this will always be called after the table is drawn
        "drawCallback": function( settings ) {
            var info = $('#example').DataTable().page.info();
            previousPage = info.page + 1;
        }
    } );
} );

On the server side, if you're using PHP, you can access the new request parameters you added like this:

<?php

$currentPage = $_POST['currentPage'];
$previousPage = $_POST['previousPage'];

?>