Пагинация таблиц

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

Настройка базовой пагинации

Компонент QTable имеет проп pagination, который управляет текущими параметрами пагинации. Пример минимальной конфигурации:

<template>
  <q-table
    :rows="rows"
    :columns="columns"
    row-key="id"
    :pagination.sync="pagination"
  ></q-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { name: 'id', label: 'ID', field: 'id', sortable: true },
        { name: 'name', label: 'Имя', field: 'name', sortable: true },
        { name: 'email', label: 'Email', field: 'email' }
      ],
      rows: [
        { id: 1, name: 'Иван', email: 'ivan@example.com' },
        { id: 2, name: 'Мария', email: 'maria@example.com' },
        // ... более 100 записей
      ],
      pagination: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 100
      }
    }
  }
}
</script>

Ключевые моменты:

  • page — текущая страница таблицы.
  • rowsPerPage — количество строк на одной странице.
  • rowsNumber — общее количество строк. Обязательный параметр при серверной пагинации.
  • Использование .sync позволяет двустороннее связывание: при изменении страницы или количества строк эти значения обновляются автоматически.

Серверная пагинация

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

<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  :pagination.sync="pagination"
  @request="fetchData"
/>

<script>
export default {
  data() {
    return {
      columns: [ /* ... */ ],
      rows: [],
      pagination: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 0
      }
    }
  },
  methods: {
    fetchData(props) {
      const { page, rowsPerPage } = props.pagination
      fetch(`/api/users?page=${page}&limit=${rowsPerPage}`)
        .then(res => res.json())
        .then(data => {
          this.rows = data.items
          this.pagination.rowsNumber = data.total
        })
    }
  },
  mounted() {
    this.fetchData({ pagination: this.pagination })
  }
}
</script>

Особенности серверной пагинации:

  • Запрос на сервер отправляется каждый раз при смене страницы или количества строк на странице.
  • rowsNumber должен быть установлен в общее количество записей на сервере, чтобы компонент корректно отображал страницы.
  • Можно сочетать с фильтрацией и сортировкой, передавая соответствующие параметры в API.

Настройка количества строк на странице

Quasar позволяет управлять выбором количества отображаемых строк через свойство rows-per-page-options. Пример:

<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  :pagination.sync="pagination"
  :rows-per-page-options="[5, 10, 20, 50]"
></q-table>

Пользователь сможет выбирать количество строк на странице из списка [5, 10, 20, 50].

Пагинация с кастомной навигацией

Если требуется создать собственный внешний элемент навигации, Quasar предоставляет объект pagination, который содержит все необходимые параметры:

<q-btn @click="prevPage" label="Назад" />
<q-btn @click="nextPage" label="Вперед" />

<script>
methods: {
  prevPage() {
    if (this.pagination.page > 1) this.pagination.page--
  },
  nextPage() {
    if (this.pagination.page < Math.ceil(this.pagination.rowsNumber / this.pagination.rowsPerPage))
      this.pagination.page++
  }
}
</script>

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

Комбинация с сортировкой и фильтрацией

Пагинация в Quasar интегрируется с сортировкой (sort-method) и фильтрацией (filter). При серверной пагинации параметры сортировки и фильтрации можно передавать в запрос API, что позволяет получать корректно отсортированные и отфильтрованные данные только для текущей страницы.

fetch(`/api/users?page=${page}&limit=${rowsPerPage}&sort=${sortBy}&order=${sortOrder}&filter=${filter}`)

На клиенте эти параметры автоматически обновляются в объекте pagination, что упрощает синхронизацию интерфейса с сервером.

Оптимизация производительности

  • Для больших таблиц рекомендуется использовать серверную пагинацию вместо загрузки всех данных на клиент.
  • Использование virtual-scroll (virtual-scroll prop) позволяет ускорить отображение даже при большом количестве строк.
  • Комбинация пагинации с ленивой загрузкой (lazy) минимизирует использование памяти и ускоряет рендеринг.

Пагинация в Quasar — гибкий инструмент, который легко настраивается под разные сценарии: локальная, серверная, с кастомной навигацией, с сортировкой и фильтрацией. Комбинация этих возможностей позволяет создавать быстрые и удобные таблицы для работы с большими объемами данных.

Оглавление