在 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 中實現基於遊標的分頁，您可以增強效能、改善使用者體驗並確保準確的資料處理。該技術對於需要快速、可擴展且可靠的資料管理的現代應用程式特別有用。

我希望本指南可以幫助您在自己的專案中實現基於遊標的分頁。快樂編碼！