Closed noru closed 7 years ago
Thanks @noru. Unfortunately, I thought you weren't comfortable with it, so I've finished it during the weekend for vuetable-2
and will probably port back to vuetable
as well within this week. Here's the way I do it.
Hi @ratiw , it's great to know that you've chosen to implement it yourself :). Looking forward to vue-table2 as well. It was national holiday in China and I wasn't around at that time, so...
However, your 'transform' doesn't solve my problem. In my project, I'd like to do as such:
transform: (body) =>{
console.log(body.pagination) // undefined
let pagination = { /* construct a legal structure for vue-table myself */ }
body.pagination = pagination
}
so you see, my problem, particularly, is not about the table data but the pagination. I think your 'dataPath' is sufficient for most cases if not all (does any api serve data as an object instead of an array? that may need more overall of a 'transform')
Some off-topic thinking:
rows.map(transform)
. Sort of more functional :)Looking forward to your reply. And if you found any items worth considering, I can create issues for tracking.
Regards
@noru Sorry for late reply. Extremely busy with other stuffs at the moment.
Does that mean the api you're using does not have the pagination information? Is it possible for you to show me the sample of the data you're getting from the API your code consumed?
I myself do not use a lot of outside API and when I wrote vuetable I try to make it as flexible as I can think of and based most of the work on Laravel and JSON API (jsonapi.org)
In my mind, the transform
was meant for data only, but it would be interesting to find and discuss a use case for pagination as well.
About your question regarding the api serving the data as object instead of an array. I don't know if any api has implemented it as such, but I would think it is not the correct way to represent the data. It should be an array, not an object. But, of course, it could be embeded inside an object.
For the off-topic discussion.
vueitems
that provide almost the same functionality to vuetable
but using an array as the data instead of feeding them from the API. It is much more simple though and aiming for a small list of table in a business form like Quotation, Purchase Order, etc.Hi @ratiw, take your time, don't worry :)
About main issue: my API is from AWS cloudsearch. Here's a sample from official document:
{
"status": {
"rid": "z67+3L0oHgo6swY=",
"time-ms": 7
},
"hits": {
"found": 1649,
"start": 0,
"cursor": "Vb-HSS4YQW9JSVFKeFpvQ2wwZERBek16SXpOems9Aw",
"hit": [
{
"id": "tt0397892"
}
...
]
}
}
Despite all that, what essentially need for a pagination component is: skip, top, total (corresponding to the example: start, hit.length, found) and all other numbers are only derivatives. That being said, a server may not return all numbers that vue-table needs (like, current page, last page)
Others 1, yeah, I started to realize that may not be a good idea given the nature of front-end development 2, 3, heard and learned 4, my reason is simple, my 'component' field, as a child component of vue-table, have a natural need to communicate with its parents, as normal vue components. Since 'component' is 'injected' by vue-table, this chain is broken here (e.g. props). Although I can fire events as usual but I don't want to abuse the usage.
Cheers!
@noru I see your point now. But in this case, you will also need to appropriate query back to the API for the next batch of data as well. Do you see the use of append-params
sufficient for your use case?
@ratiw yes, append-params
is enough for me.
Hi Rati,
Sorry for the delay. I've tried it with my project. Please take a look and let know if there is anything to change, code style etc. Also, I could update the documentation if it is accepted.
Cheers!