При работе с большими наборами данных в веб-приложениях нумерация страниц имеет решающее значение для производительности и удобства работы пользователей. Стандартное разбиение на страницы на основе смещения, обычно используемое с таблицами данных, может быть неэффективным для больших наборов данных.

Разбиение на страницы на основе курсоров предлагает более производительную альтернативу, особенно при обработке обновлений в реальном времени или больших загрузок данных. В этой статье я расскажу вам, как реализовать нумерацию страниц на основе курсора в jQuery DataTable.

Шаги по реализации нумерации страниц на основе курсора в jQuery DataTable

1.Настройка среды
Прежде чем углубляться в логику нумерации страниц, убедитесь, что у вас есть следующее:

я. jQuery
ii. Плагин DataTables
iii. Внутренний API (или база данных), поддерживающий нумерацию страниц на основе курсора

2.Настройка Backend API
Пагинация на основе курсора в значительной степени зависит от серверной части для возврата необходимых данных. Предположим, мы работаем с REST API, который возвращает ответ JSON, включая:

Данные: массив записей
Курсор: уникальный идентификатор, например идентификатор или отметка времени, указывающий текущую позицию в наборе данных.

Вот пример ответа сервера с разбивкой на страницы:

{
  "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, вы повышаете производительность, улучшаете взаимодействие с пользователем и обеспечиваете точную обработку данных. Этот метод особенно полезен для современных приложений, которым требуется быстрое, масштабируемое и надежное управление данными.

Я надеюсь, что это руководство поможет вам реализовать нумерацию страниц на основе курсора в ваших собственных проектах. Приятного кодирования!