Ao trabalhar com grandes conjuntos de dados em aplicativos da web, a paginação é crucial para o desempenho e a experiência do usuário. A paginação padrão baseada em deslocamento, comumente usada com tabelas de dados, pode ser ineficiente para grandes conjuntos de dados.

A paginação baseada em cursor oferece uma alternativa de melhor desempenho, especialmente ao lidar com atualizações em tempo real ou grandes cargas de dados. Neste artigo, explicarei como implementar a paginação baseada em cursor em um jQuery DataTable.

Etapas para implementar paginação baseada em cursor em jQuery DataTable

1.Configurando o ambiente
Antes de mergulhar na lógica de paginação, certifique-se de ter o seguinte:

eu. jQuery
ii. Plug-in DataTables
iii. API de back-end (ou banco de dados) que suporta paginação baseada em cursor

2.Configurando a API de back-end
A paginação baseada em cursor depende muito do back-end para retornar os dados necessários. Vamos supor que estamos trabalhando com uma API REST que retorna uma resposta JSON, incluindo:

Dados: uma matriz de registros
Cursor: um identificador exclusivo, como id ou carimbo de data/hora, indicando a posição atual no conjunto de dados.

Aqui está um exemplo de resposta paginada do 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.jQuery Inicialização de DataTable
O DataTable é inicializado usando jQuery e vinculado à API backend. Aqui está uma estrutura 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 paginação

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.Manipulação de API e sincronização de front-end
Cada vez que um usuário clica no botão Próximo ou Anterior, o cursor é atualizado e enviado ao backend. O backend busca os registros do banco de dados, começando na posição atual do cursor, e retorna o conjunto de dados apropriado para o DataTable.

Aqui está a essência: Clique aqui

Conclusão
A paginação baseada em cursor é uma abordagem prática e eficiente ao trabalhar com grandes conjuntos de dados ou aplicativos em tempo real. Ao implementar a paginação baseada em cursor no jQuery DataTable, você aprimora o desempenho, melhora a experiência do usuário e garante o manuseio preciso dos dados. Essa técnica é particularmente útil para aplicações modernas que exigem gerenciamento de dados rápido, escalonável e confiável.

Espero que este guia ajude você a implementar a paginação baseada em cursor em seus próprios projetos. Boa codificação!