本文介绍了验证数据表分页自定义函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

{
    "current_page": 1,
    "data": [
        {
            "id": 1,
            "contact_person": "person one",
            "email": "person_one@gmail.com",
            "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": "person_two@gmail.com",
            "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"。 在adv：)中感谢您

推荐答案

您需要提供数据表的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属性。

例如：

这篇关于验证数据表分页自定义函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持吉威生活！

[英文标题]vuetify data table pagination custom function

声明：本媒体部分图片、文章来源于网络，版权归原作者所有，如有侵权，请联系QQ:330946442删除。