How to send current page number in Ajax request

Question

I am using jQuery DataTable to display a huge amount of data in a table. I get an Ajax request data page as follows:

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 the page in the table, it warns correctly pageNo on the page (in JavaScript), but in the spring controller I always get the initial value assigned to the variable pageNo , and not the current page number.

How to pass dynamic pageNo to spring controller? Any help is appreciated.

Edit:

I updated JavaScript as follows:

  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 this gives me an error:

Warning DataTables: table id = propertyTable - Unable to reinitialize the DataTable.

Answer 1

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

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

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

Answer 2

"Unverified" Edit: Added "retrieve": true in the parameters for retrieving an instance of the table (v1.10), it is checked whether the table exists. Changed fnSettings value for parameter () for datatable v1.10.

You can try to read data from the data, and then read _ iDisplayStart and _ iDisplayLength from the settings, then calculate the 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,