vuetify数据表分页自定义函数

Question

我有已经从服务器分页的 JSON 数据。我已经成功地显示了我的 vuetify 数据表中的项目。现在我想创建从服务器加载下一组或上一组数据的分页。无法在从服务器加载下一组数据的数据表分页中添加自定义函数。

 {
    "current_page": 1,
    "data": [
        {
            "id": 1,
            "contact_person": "person one",
            "email": "[e-mail]",
            "phone": 1234567890,
            "gst": "0987654321",
            "user_id": 3,
            "created_at": "2019-08-17 18:30:00",
            "updated_at": "2019-08-17 18:55:32"
        },
        {
            "id": 2,
            "contact_person": "person two",
            "email": "[e-mail]",
            "phone": 1234567891,
            "gst": "0987654322",
            "user_id": 3,
            "created_at": "2019-08-17 18:30:00",
            "updated_at": "2019-08-17 18:55:32"
        }
    ],
    "first_page_url": "http://localhost:8000/customer?page=1",
    "from": 1,
    "last_page": 3,
    "last_page_url": "http://localhost:8000/customer?page=3",
    "next_page_url": "http://localhost:8000/customer?page=2",
    "path": "http://localhost:8000/customer",
    "per_page": 2,
    "prev_page_url": null,
    "to": 2,
    "total": 6
}

我希望在单击分页图标时执行“next_page_url”和“prev_page_url”。谢谢你的广告:)

原文由 Amit Biswas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要提供数据表的 total-items 属性 - 它将与 pagination.rowsPerPage 一起使用以计算总页数。然后，您需要处理 @update:pagination 事件，其参数将是新的分页对象：

   pagination:
    {
      descending: !!this.$route.query.desc,
      sortBy: this.$route.query.orderby || 'name',
      rowsPerPage: +this.$route.query.limit || 10,
      page: +this.$route.query.page || 1,
      totalItems: 0,
    }

在此事件处理程序中，您将通过 AJAX 获取指定的 page ，然后更新数据表的 items 属性。

例如：

 <template>
      <v-data-table
        :headers="headers"
        :items="domains"
        :rows-per-page-items="listSize"
        :pagination.sync="pagination"
        :total-items="totalNumberOfItems"
        @update:pagination="paginate"
      >
      ....
</template>

<script>
  data()
  {
    return {
      totalNumberOfItems: 0,
      domains: [],
      listSize: [10, 25, 50, 100],
      pagination:
        {
          descending: !!this.$route.query.desc,
          sortBy: this.$route.query.orderby || 'name',
          rowsPerPage: +this.$route.query.limit || 10,
          page: +this.$route.query.page || 1,
          totalItems: 0,
        }
    }
  },
  beforeRouteUpdate (to, from, next)
  {
    this.fetchData(to);
    next();
  },
  methods:
  {
    buildQuery (route)
    {
      const query = route ? route.query : this.$route.query;
      const paginate = this.pagination;

      let params = '?limit=' + paginate.rowsPerPage + '&orderby=' + paginate.sortBy;
      if (paginate.page > 1) params += '&start=' + (this.pagination.page - 1) * this.pagination.rowsPerPage;
      if (paginate.descending) params += '&direction=desc';

      return params;
    },
    fetchData (route)
    {
      this.$ajax(
        {
          method: 'GET',
          url: '/getData/' + this.buildQuery(route),
          okay: (data) =>
          {
            this.totalNumberOfItems = data.resulttotals;
            this.domains = data.items;
          },
          fail: (stat, error) =>
          {
            this.$root.showFailed(error);
          },
        }
      );
    },
      paginate (val)
      {
        // emitted by the data-table when changing page, rows per page, or the sorted column/direction - will be also immediately emitted after the component was created
        const query = this.$route.query;
        const obj = Object.assign({}, query);
        if (val.rowsPerPage !== this.listSize[0]) obj.limit = val.rowsPerPage;
        if (val.descending) obj.desc = 'true';
        else delete obj.desc;
        obj.orderby = val.sortBy;
        obj.page = val.page;
        // check if old and new query are the same - VueRouter will not change the route if they are, so probably this is the first page loading
        let same = true;
        for (let key in query)
        {
          if (query[key] != obj[key])
          {
            same = false;
            break;
          }
        }
        // to handle the case when a KEY exists in OBJ but not in query
        for (let key in obj)
        {
          if (query[key] != obj[key])
          {
            same = false;
            break;
          }
        }
        if (same) this.fetchData(); // page has been manually reloaded in the browser
        else
        {
          this.$router.replace({
            ...this.$router.currentRoute,
            query: obj
          });
        }
      },
  }
</script>

原文由 IVO GELOV 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

只听 @pagination 上的事件 v-data-table .. 就像 <v-data-table @pagination="myFunction" > 这将给

{
  page: number,
  itemsPerPage: number,
  pageStart: number,
  pageStop: number,
  pageCount: number,
  itemsLength: number
}

那作为分页事件调用的函数的参数。如果页码或每页项目发生变化，只需使用新页码/每页项目发出新请求。

v-数据表文档

原文由 Michael Mudge 发布，翻译遵循 CC BY-SA 4.0 许可协议