Как реализовать пагинацию с использованием многоточия в качестве разделителя?

  • 31 августа 2023 г. 12:56
Ответы на вопрос 1
Давайте разберемся вместе, как мы можем реализовать данную функцию пагинации с использованием многоточия в качестве разделителя.

Вот пример функции, которая может выполнить задачу:

```javascript
function paginateArray(array, activePage, maximumPagesButtonsState) {
  const totalPages = array.length;

  // Если totalPages меньше или равно maximumPagesButtonsState, возвращаем весь массив
  if (totalPages <= maximumPagesButtonsState) {
    return array;
  }

  // Вычисляем индекс кнопки с многоточием
  const ellipsisIndex = Math.floor(maximumPagesButtonsState / 3);

  // Создаем массив для хранения результатов пагинации
  const result = [];

  // Добавляем первую страницу в результат всегда
  result.push(array[0]);

  // Если активная страница не слишком близка к началу массива, добавляем кнопку с многоточием
  if (activePage > ellipsisIndex + 2) {
    result.push({
      page: ellipsisIndex + 1,
      index: ellipsisIndex,
      title: `${ellipsisIndex + 1}`,
    });
  }

  // Вычисляем начальный и конечный индексы для видимых страниц
  let start = activePage - ellipsisIndex;
  let end = activePage + (maximumPagesButtonsState - ellipsisIndex - 2);

  // Проверяем, не выходят ли начальный и конечный индексы за пределы массива
  if (start < 1) {
    start = 1;
    end = maximumPagesButtonsState - 1;
  } else if (end > totalPages - 1) {
    start = totalPages - (maximumPagesButtonsState - 2);
    end = totalPages - 1;
  }

  // Добавляем видимые страницы в результат
  for (let i = start; i <= end; i++) {
    result.push(array[i]);
  }

  // Если активная страница не слишком близка к концу массива, добавляем кнопку с многоточием
  if (activePage < totalPages - maximumPagesButtonsState + ellipsisIndex - 1) {
    result.push({
      page: activePage + ellipsisIndex + 1,
      index: activePage + ellipsisIndex,
      title: `${activePage + ellipsisIndex + 1}`,
    });
  }

  // Добавляем последнюю страницу в результат всегда
  result.push(array[totalPages - 1]);

  return result;
}
```

Пример использования:

```javascript
const array = [
  { page: 1, index: 0, title: "1" },
  { page: 2, index: 1, title: "2" },
  // ... остальные объекты с номерами страниц
  { page: 88, index: 87, title: "88" },
  { page: 89, index: 88, title: "89" },
];

const maximumPagesButtonsState = 5;
const activePage = 1;

const result = paginateArray(array, activePage, maximumPagesButtonsState);
console.log(result);
```

Ожидаемый результат:

```javascript
[
  { page: 1, index: 0, title: "1" },
  { page: 2, index: 1, title: "2" },
  { page: ellipsisIndex + 1, index: ellipsisIndex, title: `${ellipsisIndex + 1}` },
  // ... видимые страницы
  { page: 88, index: 87, title: "88" },
  { page: 89, index: 88, title: "89" },
]
```

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