Клиентская сторона Сортировка с серверной нумерацией страниц в Quasar

Question

У меня есть таблица, отображающая результаты поиска с разбивкой по страницам на стороне сервера, но когда я щелкаю столбцы, сортировка не происходит, и сервер снова отображает результаты для любого щелчка стрелки столбца. Можно ли каким-либо образом ограничить разбиение на страницы только для стрелок страницы в нижнем колонтитуле, а затем выполнить сортировку для отображаемых результатов при нажатии на столбцы?

<q-table
  dense
  :title="Patient result"
  :data="searchResultList"
  :columns="columns"
  :pagination="serverPagination"
  row-key="name"
  :no-data-label="noDataMessage"
  :loading="loading"
  @request="request"
>

data() {
return {
  filter: '',
  columns: [
    {
      name: 'patientId',
      required: true,
      label: 'patientId',
      align: 'left',
      field: row => row.patientId,
      format: val => `${val}`,
      sortable: true,
    }
    {
      name: 'lastname', align: 'center', label: 'lastname', field: 'lastname', sortable: true,
    },
    {
      name: 'firstname', align: 'center', label: 'firstname', field: 'firstname', sortable: true,
    },
    {
      name: 'dob', align: 'center', label: 'dob', field: 'dob', sortable: true,
    },

  ],
  page: 1,
  rowsInPage: 25,
};

computed: {
serverPagination() {
  return {
    sortBy: this.paginationObject.sortBy,
    descending: this.paginationObject.descending,
    page: this.paginationObject.page,
    rowsNumber: this.patientSearchResults.count,
    rowsPerPage: this.paginationObject.rowsPerPage,
  };

paginationObject: {
sortBy: 'name',
descending: false,
page: 1,
rowsPerPage: 25,

methods: {
request(props) {
  this.$store.dispatch('patientSearch/setPaginationObject', props);
},

Answer 1

Используйте sort-method. Вы можете написать пользовательскую функцию , где вы можете передать rows (Не все, но в соответствии с нумерацией страниц, т.е. если выбранная страница равна 1, строки будут 0-5 от вашего массива. Здесь я угадываю видимые строки по умолчанию будут 5.)

Ознакомьтесь с этой ссылкой API - https://quasar.dev/vue-components/table

В QTable API вы найдете подробности об этом методе.