How to send current page number in Ajax request

Question

I am using jQuery DataTable to display huge amount of data in a table. I am getting data page wise on Ajax request like this:

var pageNo = 1;
$('#propertyTable').dataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": "${contextPath}/admin/getNextPageData/"+pageNo+"/"+10,
    "columns": [
        { "data": "propertyId" },
        { "data": "propertyname" },
        { "data": "propertyType" },
        { "data": "hotProperties" },
        { "data": "address" },
        { "data": "state" },
        { "data": "beds" },
        { "data": "city" },
        { "data": "zipCode" }
    ],
    "fnDrawCallback": function () {
        pageNo = this.fnPagingInfo().iPage+1;
        alert(pageNo); // this alerts correct page
     }
} );

and here is the spring controller:

@RequestMapping(value="/getNextPageData/{pageNo}/{propertyPerPage}")
public @ResponseBody PropertyDatatableDto getNextPageData(@PathVariable Integer pageNo, @PathVariable Integer propertyPerPage) {
    System.out.println("called");
    System.out.println(pageNo); // this always prints 1, what i need is current pageNo here


    PropertyDatatableDto datatableDto = new PropertyDatatableDto();
    //datatableDto.setDraw(1);
    datatableDto.setRecordsTotal(100);
    datatableDto.setRecordsFiltered(100);
    datatableDto.setData(adminService.getAllPropertyList());
    return datatableDto;
}

The problem is that when I change page in table it alerts correct pageNo on page (in JavaScript), but in spring controller I am always getting the initial value assigned to the variable pageNo and not the current page number.

How do I pass pageNo dynamically to spring controller? Any help is appreciated.

Edit:

I updated JavaScript like this:

    var oSettings = $('#propertyTable').dataTable().fnSettings();
    var currentPageIndex = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1; 

$('#propertyTable').dataTable({
    "processing": true,
    "serverSide": true,
    "ajax": "${contextPath}/admin/getNextPageData/"+currentPageIndex+"/"+10,
    "columns": [
        { "data": "propertyId" },
        { "data": "propertyname" },
        { "data": "propertyType" },
        { "data": "hotProperties" },
        { "data": "address" },
        { "data": "state" },
        { "data": "beds" },
        { "data": "city" },
        { "data": "zipCode" }
    ]
});

But it's giving me an error:

DataTables warning: table id=propertyTable - Cannot reinitialise DataTable.

Answer 1

DataTables already sends parameters start and length in the request that you can use to calculate page number, see Server-side processing.

If you still need to have the URL structure with the page number, you can use the code below:

"ajax": {
   "data": function(){
      var info = $('#propertyTable').DataTable().page.info();

      $('#propertyTable').DataTable().ajax.url(
          "${contextPath}/admin/getNextPageData/"+(info.page + 1)+"/"+10
      );
   }
},

Answer 2

"Untested" Edit: Added "retrieve": true in options to retrieve the table instance (v1.10), checked if table exists. Changed fnSettings to setting() for datatable v1.10.

You can try to read from the datatable settings and then from settings read _iDisplayStart and _iDisplayLength , then calculate current page index as follows:

var currentPageIndex  = 1;
//Is datatable already initialized? 
if ( $.fn.DataTable.isDataTable( '#propertyTable' ) ) {
//Get the current settings and calculate current page index
    var oSettings = $('#propertyTable').dataTable({"retrieve": true}).settings();
    currentPageIndex = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;


}

then in ajax call pass currentPageIndex:

 "ajax": "${contextPath}/admin/getNextPageData/"+currentPageIndex +"/"+10,