Problem Description
Hi, I'm come here because I'm currently using antdv2 for component table with pagination, and documentation refer your library, after I read your documentation it turns out that you also refer antdv2 for the example :D
As explained in the title, I have a need for a component that can fetch data from laravel pagination, everything works fine when I run the documentation from ant regarding table components and ajax, but I'm stuck because documentation write hardcode for total
const pagination = computed(() => ({
total: 200, //I need this dynamic, also get from api
current: current.value,
pageSize: pageSize.value,
}));
I use this from laravel
$result['data'] = Model::paginate($per_page);
And give this json result
{
"current_page": 1,
"data": [
...
{
"id": x,
"name": "name",
...
},
...
],
...
"per_page": "10",
"prev_page_url": null,
"to": 10,
"total": 200
}
I use axios to fetch api because it's good and your recomendation, so I write this on some file :
import api from 'axios'
export default {
async queryData(data) {
return await api.get(`/users`,{ params: data })
},
}
And this is my table component:
const { data: dataSource, run, loading, current, total, pageSize } = usePagination(repo.queryData, {
//response.data : axios return .data for access api data
//.data : laravel return data when use json return
//.data : data from my code like I describe above
// yes so many data, but currently this is my standard, if this change will affect to other :p
formatResult: res => res.data.data.data,
pagination: {
currentKey: 'page',
pageSizeKey: 'per_page',
},
});
const pagination = computed(() => ({
total: 200,
current: current.value,
pageSize: pageSize.value,
}));
...
this is work perfectly, but when when I use dynamic from total
const pagination = computed(() => ({
total: tota.value,
current: current.value,
pageSize: pageSize.value,
}));
this is not working because, total.value give 0. I change code like this
const { data: dataSource, run, current, total, loading, pageSize } = usePagination(repo.queryData, {
// remove one data
formatResult: res => res.data.data,
pagination: {
currentKey: 'page',
pageSizeKey: 'per_page',
totalKey: 'total',
},
})
this is catch total perfectly, but datasource now error, can you help me ?