Web アプリケーションで大規模なデータセットを操作する場合、ページネーションはパフォーマンスとユーザー エクスペリエンスにとって非常に重要です。データ テーブルで一般的に使用される標準のオフセット ベースのページネーションは、大規模なデータセットでは非効率的になる可能性があります。

カーソルベースのページネーションは、特にリアルタイムの更新や大規模なデータ読み込みを処理する場合に、よりパフォーマンスの高い代替手段を提供します。この記事では、jQuery DataTable にカーソルベースのページネーションを実装する方法を説明します。

jQuery DataTable でカーソルベースのページネーションを実装する手順

1.環境のセットアップ
ページネーション ロジックに入る前に、次の内容があることを確認してください:

私。 jQuery
ii. DataTables プラグイン
iii.カーソルベースのページネーションをサポートするバックエンド 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 は 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 にカーソルベースのページネーションを実装することで、パフォーマンスが向上し、ユーザー エクスペリエンスが向上し、正確なデータ処理が保証されます。この手法は、高速、スケーラブル、信頼性の高いデータ管理を必要とする最新のアプリケーションに特に役立ちます。

このガイドが、独自のプロジェクトでカーソルベースのページネーションを実装するのに役立つことを願っています。コーディングを楽しんでください!