如何在 Ajax 请求中发送当前页码

Posted 2023-02-26

【中文标题】如何在 Ajax 请求中发送当前页码

【英文标题】：How to send current page number in Ajax request

【发布时间】：2015-09-07 15:54:49

【问题描述】：

我正在使用 jQuery DataTable 在表格中显示大量数据。我在这样的 Ajax 请求中获取数据页面：

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
     
 );

这里是弹簧控制器：

@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;

问题是，当我在表中更改页面时，它会在页面上（在 javascript 中）警告正确的 pageNo，但在 spring 控制器中，我总是得到分配给变量 pageNo 的初始值，而不是当前页码.

如何将pageNo 动态传递给弹簧控制器？任何帮助表示赞赏。

编辑：

我这样更新了 JavaScript：

    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" 
    ]
);

但它给了我一个错误：

DataTables 警告：table id=propertyTable - 无法重新初始化 DataTable。

【参考方案1】：

DataTables 已经在请求中发送了参数start 和length，可用于计算页码，请参阅Server-side processing。

如果还需要有页码的URL结构，可以使用下面的代码：

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

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

【讨论】：

仅供参考，获取页码的计算方法是：data.start / data.length + 1

【参考方案2】：

“未经测试” 编辑：在检索表实例（v1.10）的选项中添加了“retrieve”：true，检查表是否存在。将数据表 v1.10 的 fnSettings 更改为 setting()。

您可以尝试从数据表设置中读取，然后从设置中读取_iDisplayStart和_iDisplayLength，然后计算当前页面索引如下：

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;

然后在ajax调用中传递currentPageIndex：

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

【讨论】：

感谢您的回复。但它抛出一些错误说无法重新初始化 DataTable

您使用的是哪个版本的数据表？

1.10.0，我也更新了我的问题。请检查我在哪里做错了。谢谢。

谢谢@SSA。但是由于 Gyrocode.com 的答案对我来说很好，所以我没有检查你更新的代码。不过，它可能会起作用，谢谢！

【参考方案3】：

使用此代码可以获得更好的结果

   fnRowCallback: function (nRow, aData, iDisplayIndex) 
    var info = table.page.info();

    if (
      i < info.start ||
      i >= info.end
    ) 
      i = info.start;
    

    $("td:first", nRow).html(i + 1);
    i += 1;
    return nRow;
  ,

【讨论】：

请解释为什么使用此代码可以获得更好的结果

【参考方案4】：

而不是使用$("YourDataTableId").DataTable().ajax.reload() 重新加载数据表，我们可以使用以下代码在服务器端发送当前页码以加载该页码的数据。

var currentDataTable = $("YourDataTableId").DataTable();
let currentPage = currentDataTable.page() >= 0 ? currentDataTable.page() : 0;
currentDataTable.page(currentPage).draw(false);

连同这段代码，我们必须在数据表中使用以下设置 -

$("YourDataTableId").DataTable(
        "stateSave": true, // to save the current page
);`