Пагинация в Битрикс на Vue

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

Создание компонента Vue для пагинации

Для создания компонента Vue для пагинации нам понадобится создать новый файл VuePagination.vue. В этом файле мы определим компонент, который будет отображать кнопки пагинации, информацию о текущей странице и общем количестве страниц.

<template>
  <div class="pagination">
    <span>Страница {{ currentPage }} из {{ totalPages }}</span>
    <button v-if="currentPage > 1" @click="goToPage(currentPage - 1)">«</button>
    <button v-for="page in pages" :key="page" @click="goToPage(page)" :class="{ active: currentPage === page }">{{ page }}</button>
    <button v-if="currentPage < totalPages" @click="goToPage(currentPage + 1)">»</button>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      required: true,
    },
    totalPages: {
      type: Number,
      required: true,
    },
  },
  computed: {
    pages() {
      const pages = [];
      for (let i = 1; i <= this.totalPages; i++) {
        pages.push(i);
      }
      return pages;
    },
  },
  methods: {
    goToPage(page) {
      this.$emit('pageChanged', page);
    },
  },
};
</script>

<style>
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.pagination button {
  border: none;
  background: none;
  font-size: 16px;
  cursor: pointer;
  margin: 0 5px;
}

.pagination button.active {
  font-weight: bold;
}
</style>

В этом компоненте мы определили два свойства currentPage и totalPages, которые будут содержать информацию о текущей странице и общем количестве страниц. Мы также определили метод goToPage, который будет вызываться при нажатии на кнопки пагинации и генерировать событие pageChanged, передавая ему номер новой страницы.

Использование компонента на странице Битрикс

Чтобы использовать созданный компонент на странице Битрикс, нам нужно добавить его в шаблон компонента bitrix:main.interface. Мы также должны передать компоненту необходимые параметры, такие как текущая страница и количество элементов на странице.

<?php
// Получаем текущую страницу и количество элементов на странице
$currentPage = (int) ($_GET['page'] ?? 1);
$perPage = 10;

// Загружаем данные для текущей страницы
$items = []; // Ваш код для получения данных

// Вычисляем общее количество элементов
$totalItems = count($items);

// Формируем массив данных для компонента Vue
$componentData = [
  'items' => $items,
  'pagination' => [
    'currentPage' => $currentPage,
    'totalPages' => ceil($totalItems / $perPage),
  ],
];

// Определяем код компонента и передаем ему данные
$APPLICATION->IncludeComponent(
  'bitrix:main.interface',
  '',
  [
    'ID' => 'vue-pagination',
    'DATA' => json_encode($componentData),
    'COMPONENT_CODE' => 'vue-pagination',
  ]
);

// Обрабатываем событие изменения страницы пагинации и отправляем AJAX-запрос на сервер
?>
<template>
  <div>
    <div v-for="item in items" :key="item.id">{{ item.title }}</div>
    <vue-pagination :current-page="pagination.currentPage" :total-pages="pagination.totalPages" @pageChanged="handlePageChanged" />
  </div>
</template>

<script>
import VuePagination from './VuePagination.vue';

export default {
  components: {
    VuePagination,
  },
  data() {
    return {
      items: [],
    };
  },
  mounted() {
    // Загружаем данные для первой страницы
    this.loadItems(1);
  },
  methods: {
    loadItems(page) {
      // Отправляем AJAX-запрос на сервер для получения данных для указанной страницы
      // ...

      // Обновляем список элементов
      this.items = responseData.items;
    },
    handlePageChanged(page) {
      // Обновляем текущую страницу
      this.pagination.currentPage = page;

      // Загружаем данные для новой страницы
      this.loadItems(page);
    },
  },
};
</script>

В этом примере мы получаем текущую страницу и количество элементов на странице из параметров запроса. Затем мы загружаем данные для текущей страницы и вычисляем общее количество элементов. Мы формируем массив данных для компонента Vue и передаем его в шаблон компонента bitrix:main.interface.

На странице мы отображаем список элементов и компонент пагинации vue-pagination. Мы также определяем метод loadItems, который отправляет AJAX-запрос на сервер для получения данных для указанной страницы. Метод handlePageChanged вызывается при изменении страницы пагинации и обновляет список элементов.

Заключение

В этой статье мы рассмотрели, как реализовать пагинацию в Битрикс на Vue. Мы создали компонент Vue для отображения пагинации и использовали его на странице Битрикс для разбиения списка элементов на страницы. Мы также обработали событие изменения страницы пагинации и отправили AJAX