Cuando se trabaja con grandes conjuntos de datos en aplicaciones web, la paginación es crucial para el rendimiento y la experiencia del usuario. La paginación estándar basada en desplazamiento, comúnmente utilizada con tablas de datos, puede resultar ineficaz para conjuntos de datos grandes.

La paginación basada en cursor ofrece una alternativa más eficaz, especialmente cuando se manejan actualizaciones en tiempo real o grandes cargas de datos. En este artículo, le explicaré cómo implementar la paginación basada en cursor en una tabla de datos jQuery.

Pasos para implementar la paginación basada en cursores en jQuery DataTable

1.Configuración del entorno
Antes de profundizar en la lógica de paginación, asegúrese de tener lo siguiente:

i. jQuery
ii. Complemento de tablas de datos
III. API backend (o base de datos) que admite paginación basada en cursor

2.Configurando la API de backend
La paginación basada en cursor depende en gran medida del backend para devolver los datos necesarios. Supongamos que estamos trabajando con una API REST que devuelve una respuesta JSON, que incluye:

Datos: una serie de registros
Cursor: un identificador único, como id o marca de tiempo, que indica la posición actual en el conjunto de datos.

Aquí hay un ejemplo de una respuesta paginada del servidor:

{
  "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.Inicialización de jQuery DataTable
El DataTable se inicializa usando jQuery y se vincula con la API de backend. Aquí hay una estructura básica:

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.Personalizar controles de paginación

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.Manejo de API y sincronización frontend
Cada vez que un usuario hace clic en el botón Siguiente o Anterior, el cursor se actualiza y se envía al backend. El backend recupera los registros de la base de datos, comenzando desde la posición actual del cursor, y devuelve el conjunto de datos apropiado a DataTable.

Esto es lo esencial: haga clic aquí

Conclusión
La paginación basada en cursores es un enfoque práctico y eficiente cuando se trabaja con grandes conjuntos de datos o aplicaciones en tiempo real. Al implementar la paginación basada en cursor en jQuery DataTable, mejora el rendimiento, mejora la experiencia del usuario y garantiza un manejo preciso de los datos. Esta técnica es particularmente útil para aplicaciones modernas que exigen una gestión de datos rápida, escalable y confiable.

Espero que esta guía te ayude a implementar la paginación basada en cursores en tus propios proyectos. ¡Feliz codificación!