在 Web 应用程序中处理大型数据集时，分页对于性能和用户体验至关重要。标准的基于偏移量的分页（通常与数据表一起使用）对于大型数据集可能效率低下。

基于游标的分页提供了一种性能更高的替代方案，特别是在处理实时更新或大量数据加载时。在本文中，我将引导您了解如何在 jQuery DataTable 中实现基于游标的分页。

在 jQuery DataTable 中实现基于游标的分页的步骤

1.环境搭建
在深入研究分页逻辑之前，请确保您具有以下内容：

我。 jQuery
二.数据表插件
三.支持基于游标的分页的后端API（或数据库）

2.配置后端API
基于游标的分页很大程度上依赖于后端返回必要的数据。假设我们正在使用返回 JSON 响应的 REST API，包括：

数据：记录数组
光标：唯一标识符，例如id或时间戳，指示数据集中的当前位置。

这是来自服务器的分页响应的示例：

{
  "data": [
    {"id": 101, "name": "John Doe", "email": "[email protected]"},
    {"id": 102, "name": "Jane Smith", "email": "[email protected]"}
  ],
  "pagination": {
     "next_cursor": "eyJpZCI6MTgsIl9wb2ludHNUb05leHRJdGVtcyI6dHJ1ZX0",
        "prev_cursor": "eyJpZCI6MTAsIl9wb2ludHNUb05leHRJdGVtcyI6ZmFsc2V9"
   }
}

3.jQuery DataTable初始化
DataTable 使用 jQuery 初始化并与后端 API 链接。这是一个基本结构：

var ajaxurl = "your-ajax-url";

var oTable = jQuery("#product_list_tbl").DataTable({
  preDrawCallback: function (settings) {
    var dt = jQuery("#product_list_tbl").DataTable();
    var settings = dt.settings();
    if (settings[0].jqXHR) {
      settings[0].jqXHR.abort();
    }
  },
  pagingType: 'simple',
  pageLength: 9,
  serverMethod: "post",
  ajax: {
    url: ajaxurl   "?action=search_ids",
    data: function (d) {
      d.search_id = jQuery("#search_id").val();
      // other params
    }
  },
});

4.自定义分页控件

var ajaxurl = "your-ajax-url";

var oTable = jQuery("#product_list_tbl").DataTable({
  preDrawCallback: function (settings) {
    var dt = jQuery("#product_list_tbl").DataTable();
    var settings = dt.settings();
    if (settings[0].jqXHR) {
      settings[0].jqXHR.abort();
    }
  },
  pagingType: 'simple',
  pageLength: 9,
  serverMethod: "post",
  ajax: {
    url: ajaxurl   "?action=search_ids",
    data: function (d) {
      d.cursor = jQuery("#product_list_tbl").data('current-cursor') || '';
      d.search_id = jQuery("#search_id").val();
      // other params
    }
  },
  drawCallback: function (json) {

    const pagination = json.json.pagination;

    if (pagination.next_cursor) {
      jQuery(document).find('.paginate_button.next').removeClass('disabled');
      jQuery(document).find('.paginate_button.next').attr('data-cursor', json.json.pagination.next_cursor ?? '' );
    } else {
      jQuery(document).find('.paginate_button.next').addClass('disabled');
    }

    if (pagination.prev_cursor) {
      jQuery(document).find('.paginate_button.previous').removeClass('disabled');
      jQuery(document).find('.paginate_button.previous').attr('data-cursor', json.json.pagination.prev_cursor ?? '' );
    } else {
      jQuery(document).find('.paginate_button.previous').addClass('disabled');
    }

  },
});

 // Custom click handlers for pagination buttons
  jQuery(document).on('click', '#product_list_tbl_paginate .paginate_button', function(e) {
    e.preventDefault();
    e.stopPropagation(); // Prevent event from bubbling up

    // Only proceed if this is actually a 'next' or 'previous' button
    if (!jQuery(this).hasClass('next') && !jQuery(this).hasClass('previous')) {
      return;
    }

    var cursor = jQuery(this).attr('data-cursor');

    // Set the cursor directly on the table element
    jQuery("#product_list_tbl").data('current-cursor', cursor);

    // Reload the table with the new cursor
    oTable.ajax.reload();
  });

  // Disable default DataTables click handlers for pagination
  jQuery(document).off('click.DT', '#product_list_tbl_paginate .paginate_button');

5.处理API和前端同步
每次用户单击“下一步”或“上一步”按钮时，光标都会更新并发送到后端。后端从数据库中获取记录，从当前光标位置开始，并将适当的数据集返回到DataTable。

要点：点击此处

结论
在处理大型数据集或实时应用程序时，基于游标的分页是一种实用且高效的方法。通过在 jQuery DataTable 中实现基于游标的分页，您可以增强性能、改善用户体验并确保准确的数据处理。该技术对于需要快速、可扩展且可靠的数据管理的现代应用程序特别有用。

我希望本指南可以帮助您在自己的项目中实现基于光标的分页。快乐编码！