Lorsque vous travaillez avec de grands ensembles de données dans des applications Web, la pagination est cruciale pour les performances et l'expérience utilisateur. La pagination standard basée sur le décalage, couramment utilisée avec les tableaux de données, peut s'avérer inefficace pour les grands ensembles de données.

La pagination basée sur le curseur offre une alternative plus performante, en particulier lors de la gestion des mises à jour en temps réel ou des charges de données volumineuses. Dans cet article, je vais vous expliquer comment j'implémente la pagination basée sur le curseur dans un DataTable jQuery.

Étapes pour implémenter la pagination basée sur le curseur dans jQuery DataTable

1.Configuration de l'environnement
Avant de plonger dans la logique de pagination, assurez-vous d'avoir les éléments suivants :

je. jQuery
ii. Plugin DataTables
iii. API backend (ou base de données) qui prend en charge la pagination basée sur le curseur

2.Configuration de l'API backend
La pagination basée sur un curseur s'appuie fortement sur le backend pour renvoyer les données nécessaires. Supposons que nous travaillons avec une API REST qui renvoie une réponse JSON, notamment :

Données : un tableau d'enregistrements
Curseur : un identifiant unique, tel qu'un identifiant ou un horodatage, indiquant la position actuelle dans l'ensemble de données.

Voici un exemple de réponse paginée du serveur :

{
  "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.Initialisation de DataTable jQuery
Le DataTable est initialisé à l'aide de jQuery et lié à l'API backend. Voici une structure de base :

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.Personnaliser les contrôles de pagination

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.Gestion de l'API et de la synchronisation frontend
Chaque fois qu'un utilisateur clique sur le bouton Suivant ou Précédent, le curseur est mis à jour et envoyé au backend. Le backend récupère les enregistrements de la base de données, en commençant par la position actuelle du curseur, et renvoie l'ensemble de données approprié au DataTable.

Voici l'essentiel : cliquez ici

Conclusion
La pagination basée sur un curseur est une approche pratique et efficace lorsque vous travaillez avec de grands ensembles de données ou des applications en temps réel. En implémentant la pagination basée sur le curseur dans jQuery DataTable, vous améliorez les performances, améliorez l'expérience utilisateur et garantissez une gestion précise des données. Cette technique est particulièrement utile pour les applications modernes qui exigent une gestion des données rapide, évolutive et fiable.

J'espère que ce guide vous aidera à implémenter la pagination basée sur le curseur dans vos propres projets. Bon codage !