Разбивка на страницы — важнейший аспект современной веб-разработки, когда речь идет об отображении больших наборов данных в удобной для пользователя форме. В этой статье мы рассмотрим несколько методов реализации нумерации страниц в TypeScript, подходящих как для внешнего, так и для внутреннего сценариев. К концу вы получите четкое представление о различных методах нумерации страниц и о том, как использовать их в своих проектах TypeScript.

Метод 1. Разбивка массива
Один из самых простых методов реализации нумерации страниц в TypeScript — использование разбивки массива. Этот метод предполагает разделение большого массива данных на более мелкие фрагменты, каждый из которых представляет определенную страницу. Вот пример:

function paginateArray(array: any[], pageSize: number, page: number): any[] {
  const startIndex = (page - 1) * pageSize;
  const endIndex = page * pageSize;

  return array.slice(startIndex, endIndex);
}
const data = [/* Your array of data */];
const pageSize = 10;
const currentPage = 2;
const paginatedData = paginateArray(data, pageSize, currentPage);
console.log(paginatedData);

Метод 2: смещение и предел
Другой популярный подход — использование методов «смещения» и «предела», обычно встречающихся в запросах к базе данных. Этот метод предполагает указание смещения (начальной точки) и ограничения (количества элементов на странице) при получении данных. Вот пример:

function getPaginatedData(offset: number, limit: number): any[] {
  // Fetch data from the backend using the offset and limit
  // Return the paginated data
}
const pageSize = 10;
const currentPage = 2;
const offset = (currentPage - 1) * pageSize;
const paginatedData = getPaginatedData(offset, pageSize);
console.log(paginatedData);

Метод 3: бесконечная прокрутка
Бесконечная прокрутка — популярный метод, используемый в современных веб-приложениях, особенно при работе с большими наборами данных. Он динамически загружает данные, когда пользователь прокручивает контент. Вот базовый пример использования TypeScript:

function loadMoreData(page: number): void {
  // Fetch more data from the backend based on the page number
  // Append the new data to the existing list
  // Update the page number for the next call
}
let currentPage = 1;
// Event listener for scroll event
window.addEventListener('scroll', () => {
  const scrollHeight = document.documentElement.scrollHeight;
  const scrollTop = document.documentElement.scrollTop;
  const clientHeight = document.documentElement.clientHeight;

  if (scrollTop + clientHeight >= scrollHeight) {
    currentPage++;
    loadMoreData(currentPage);
  }
});

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