Bei der Arbeit mit großen Datensätzen in Webanwendungen ist die Paginierung entscheidend für Leistung und Benutzererfahrung. Die standardmäßige offsetbasierte Paginierung, die üblicherweise bei Datentabellen verwendet wird, kann bei großen Datensätzen ineffizient sein.

Cursorbasierte Paginierung bietet eine leistungsfähigere Alternative, insbesondere bei der Verarbeitung von Echtzeitaktualisierungen oder großen Datenmengen. In diesem Artikel erkläre ich Ihnen, wie ich die Cursor-basierte Paginierung in einer jQuery-Datentabelle umsetze.

Schritte zum Implementieren der Cursor-basierten Paginierung in jQuery DataTable

1.Einrichten der Umgebung
Bevor Sie sich mit der Paginierungslogik befassen, stellen Sie sicher, dass Sie Folgendes haben:

ich. jQuery
ii. DataTables-Plugin
iii. Backend-API (oder Datenbank), die die Cursor-basierte Paginierung unterstützt

2.Konfigurieren der Backend-API
Die Cursor-basierte Paginierung ist stark darauf angewiesen, dass das Backend die erforderlichen Daten zurückgibt. Nehmen wir an, wir arbeiten mit einer REST-API, die eine JSON-Antwort zurückgibt, einschließlich:

Daten: Ein Array von Datensätzen
Cursor: Ein eindeutiger Bezeichner, z. B. eine ID oder ein Zeitstempel, der die aktuelle Position im Datensatz angibt.

Hier ist ein Beispiel für eine paginierte Antwort vom Server:

{
  "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-Initialisierung
Die DataTable wird mit jQuery initialisiert und mit der Backend-API verknüpft. Hier ist eine Grundstruktur:

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. Paginierungssteuerelemente anpassen

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. Handhabung von API und Frontend-Synchronisierung
Jedes Mal, wenn ein Benutzer auf die Schaltfläche „Weiter“ oder „Zurück“ klickt, wird der Cursor aktualisiert und an das Backend gesendet. Das Backend ruft die Datensätze ab der aktuellen Cursorposition aus der Datenbank ab und gibt den entsprechenden Datensatz an die DataTable zurück.

Das Wesentliche: Klicken Sie hier

Abschluss
Cursorbasierte Paginierung ist ein praktischer und effizienter Ansatz bei der Arbeit mit großen Datensätzen oder Echtzeitanwendungen. Durch die Implementierung der Cursor-basierten Paginierung in jQuery DataTable steigern Sie die Leistung, verbessern die Benutzererfahrung und stellen eine genaue Datenverarbeitung sicher. Diese Technik ist besonders nützlich für moderne Anwendungen, die eine schnelle, skalierbare und zuverlässige Datenverwaltung erfordern.

Ich hoffe, dieser Leitfaden hilft Ihnen bei der Implementierung der Cursor-basierten Paginierung in Ihren eigenen Projekten. Viel Spaß beim Codieren!