Question

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

{
    "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：）

Answer 1

您需要提供数据表的UPDATE tablex SET Started_On = TO_DATE('01/01/1900', 'MM/DD/YYYY') WHERE OBJID NOT IN (SELECT MIN(OBJID) FROM tablex GROUP BY scheduledJob2Order, Started_On)属性-该属性将与total-items结合使用以计算总页数。然后，您将需要处理pagination.rowsPerPage事件，该事件的参数将是新的分页对象：

@update:pagination

在此事件处理程序中，您将通过AJAX获取指定的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, }，然后更新数据表的page属性。

例如：

items

Answer 2

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

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

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

v-data-table docs

Answer 3

参考：https://vuetifyjs.com/en/components/data-tables/#server-side-paginate-and-sort

如果你从后端加载已经分页和排序的数据，你可以使用 server-items-length 属性。定义这个 prop 将禁用内置的排序和分页，你需要使用可用事件（update:page、update:sortBy、update:options 等）来知道何时从后端请求新页面。使用 loading 道具在获取数据时显示进度条。

<script>
  export default {
    data () {
      return {
        totalDesserts: 0,
        desserts: [],
        loading: true,
        options: {},
        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'start',
            sortable: false,
            value: 'name',
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' },
        ],
      }
    },
    watch: {
      options: {
        handler () {
          this.getDataFromApi()
        },
        deep: true,
      },
    },
    mounted () {
      this.getDataFromApi()
    },
    methods: {
      getDataFromApi () {
        this.loading = true
        this.fakeApiCall().then(data => {
          this.desserts = data.items
          this.totalDesserts = data.total
          this.loading = false
        })
      },
      /**
       * In a real application this would be a call to fetch() or axios.get()
       */
      fakeApiCall () {
        return new Promise((resolve, reject) => {
          const { sortBy, sortDesc, page, itemsPerPage } = this.options

          let items = this.getDesserts()
          const total = items.length

          if (sortBy.length === 1 && sortDesc.length === 1) {
            items = items.sort((a, b) => {
              const sortA = a[sortBy[0]]
              const sortB = b[sortBy[0]]

              if (sortDesc[0]) {
                if (sortA < sortB) return 1
                if (sortA > sortB) return -1
                return 0
              } else {
                if (sortA < sortB) return -1
                if (sortA > sortB) return 1
                return 0
              }
            })
          }

          if (itemsPerPage > 0) {
            items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
          }

          setTimeout(() => {
            resolve({
              items,
              total,
            })
          }, 1000)
        })
      },
      getDesserts () {
        return [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%',
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%',
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7%',
          },
          {
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: '8%',
          },
          {
            name: 'Gingerbread',
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            iron: '16%',
          },
          {
            name: 'Jelly bean',
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            iron: '0%',
          },
          {
            name: 'Lollipop',
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            iron: '2%',
          },
          {
            name: 'Honeycomb',
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            iron: '45%',
          },
          {
            name: 'Donut',
            calories: 452,
            fat: 25.0,
            carbs: 51,
            protein: 4.9,
            iron: '22%',
          },
          {
            name: 'KitKat',
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            iron: '6%',
          },
        ]
      },
    },
  }
</script>

<template>
  <div>
    <v-data-table
      :headers="headers"
      :items="desserts"
      :options.sync="options"
      :server-items-length="totalDesserts"
      :loading="loading"
      class="elevation-1"
    ></v-data-table>
  </div>
</template>

验证数据表分页自定义功能

3 个答案: