我有已经从服务器分页的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:)
答案 0 :(得分: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
答案 1 :(得分:1)
只需侦听 @pagination
上的 v-data-table
事件 .. 就像 <v-data-table @pagination="myFunction" >
将给
{
page: number,
itemsPerPage: number,
pageStart: number,
pageStop: number,
pageCount: number,
itemsLength: number
}
作为分页事件调用的函数的参数。如果页码或每页项目发生变化,只需使用新的页码/每页项目发出新请求。
答案 2 :(得分:0)
参考: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>