Question

我正在使用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。

Answer 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
      );
   }
},

Answer 2

＆＃34;未测试＆＃34; 编辑：添加＆＃34;检索＆＃34;：选项中的true以检索表实例（v1.10），检查表是否存在。将fnSettings更改为datatable v1.10的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,

Answer 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;
  },

Answer 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
});`

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

编辑：

4 个答案: